/* ============================================================
   FLAG-FOLDING.CSS — Tattered Flag Foundation
   Page-specific styles for flag-folding.html.
   Link after flag-code-shared.css, before nav.css/footer.css.
   ============================================================ */
.fifth-text p {
    margin-bottom: 1rem;
}

/* "See Below" callout. Takes the "image" grid slot through the shared
   .fifth-image class; only the look of the box is defined here. */
.fifth-see-below-text {
    /* color: var(--nuetral-900); */
   color: var(--clr-nuetral-950);
    font-size: var(--fs-400);
    font-weight: 800;
    text-shadow: 0 0 1px black;
    letter-spacing: .4ch;
    align-self: center;
    text-align: center;   /* keeps it vertically centered in the row */
    width: auto;          /* overrides the shared "* { width: 100% }" */
    padding: 4em 1em;
    border: 3px solid var(--clr-yellow);
    outline: .8px solid black;
    border-radius: 8px;
    background-color: var(--clr-blue-light);
}

.fold-meanings-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.fold-meanings-list li {
    margin-bottom: 0.6rem;
    line-height: 1.5;
}

 .fifth-fold-inst-to-title {
    display: none;  
    }

@media (width < 1024px) {
    #fifth-section {
        grid-template-areas:
            "text"
            "image";
    }
    .fifth-fold-inst-to-title {
        display: block;
        padding: 1.5em 1em; 
    }
}

#seventh-section {
    display: grid;
    grid-template-areas: 
    "flag-fold-1 flag-fold-2 flag-fold-3 flag-fold-4 flag-fold-5 flag-fold-6";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1.5rem;
    margin: auto;
    width: clamp(300px, 80vw, 1400px);
    padding: 2rem 3rem;
}
.flag-fold-image-wrapper {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    padding: 1em;
    background-color: var(--clr-neutral-400);
    border: 1px solid black;
    border-radius: 8px;
    /* border: 2px solid var(--clr-nuetral-black-gray); */
}
.flag-fold-image-wrapper .fold-text {
    color: black;
    font-size: var(--fs-400);
}
.fold-image {
    width: auto;
    height: auto;
    padding: 1em;
}
.flag-fold-image-wrapper:last-child .fold-image {
    transform-origin: 21% 58%;   /* was 78%__the triangle's position inside its image */
    transform: translate(28%, -28%) scale(3); /* grow it 3x around the triangle, then move it to the card's center */
}