/* ============================================================
   PLEDGE-OF-ALLEGIANCE.CSS — Tattered Flag Foundation
   Page-specific styles for pledge-of-allegiance.html.
   Link after flag-code-shared.css, before nav.css/footer.css.
   ============================================================ */
/* @media (width >= 1300px) {
.second-image {  
    width: 25vw;
    height: auto;
}
}
@media (width <= 768px) {
    .second-section-right {
        display: flex;
        flex-direction: column;
}
    .second-image {  
    width: 90vw;
    height: auto;
    padding: 0;
    margin: 0;
}
   .second-image-container {
    padding: 0;
    margin: 5vw;
    margin-bottom: 0;
   }
   .second-text-container {
    padding: 0;
    margin: 5vw;
    margin-bottom: 0;
  
   }
}
.third-text p {
    margin-bottom: 1rem;
}
.third-image-container, .fourth-image-container {
    max-width: 35vw;
}
.third-image {
    width: 26vw;
    margin: 2rem 2.5rem 0 2rem;
    padding-top: 2rem;
    padding-bottom: 0;
}
.fourth-image {
    margin: 1rem 2.5rem 2.2rem 1rem;
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
    width: 16vw;
    height: auto;
}

.third-text-container div,
.fourth-text-container div {
    background-color: white;
    color: black;
    padding: 2rem;
}
.third-text-container, .fourth-text-container {
    padding: 2rem;
    background-color: white;
    border: none;
} */

.fourth-text sup a {
    color: var(--clr-yellow-light);
    text-decoration: none;
    font-weight: 700;
}

.page-footnote {
    max-width: 640px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
    font-size: 0.9rem;
    color: var(--clr-gray-dark);
    line-height: 1.5;
}

.footnote-back-link {
    margin-left: 0.4em;
    color: var(--clr-blue-dark);
    text-decoration: none;
}

.footnote-back-link:hover,
.footnote-back-link:focus {
    text-decoration: underline;
}