main#ssfd {

    --background: #000;
    --color: #fff;
    --color-primary: #00E4FF;

    padding-bottom: 10rem;
    background-color: var(--background);

    h1, h2, h3, h4, p {
        color: var(--color);
        margin-top: 0;
        letter-spacing: 0;
    }

    figure.hero:has(img) {
        border: 1px solid var(--color);
        margin-bottom: 8rem;
    }

    section {
        max-width: 1470px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .centered {
        text-align: center;
        font-family: "Source Sans 3", sans-serif;
        margin-bottom: 8rem;


        h1 {
            font-family: "Source Sans 3", sans-serif;
            font-size: clamp(26px, 9vw, 150px);
            text-transform: uppercase;
            line-height: .9;
            max-width: 90%;
            margin: 0 auto 4rem auto;
        }

        p {
            font-size: clamp(18px, 2.3vw, 25px);
            max-width: 67%;
            margin: 0 auto;
            line-height: 2.65ch;
        }
    }

    section:has(.gallery) h2 {
        text-transform: uppercase;
        line-height: .9;
        /* display: flex; */
        /* justify-self: center; */
        margin-bottom: 5rem;
        font-size: clamp(22px, 4.8vw, 80px);
    }

    .gallery {
        --aspect-ratio: 1 / 1;
        --columns: 3;
        --content-gap: 4rem;
        --transition-timing: cubic-bezier(.4,0,.2,1);
        margin: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
        /* grid-template-columns: repeat(var(--columns), 1fr); */
        gap: var(--content-gap);
        margin-bottom: 8rem;

        a {
            border-bottom: 3px solid transparent;
            transition: border-color .3s var(--transition-timing);
        }

        figure {

            margin: 0;

            p {
                margin: 0;
                transition: color .3s var(--transition-timing);
            }

            .image {
                aspect-ratio: var(--aspect-ratio);
                overflow: visible;
                margin-bottom: 1rem;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            figcaption {
                font-family: "source-sans-3-variable", sans-serif;
                font-size: clamp(16px, 1.4vw, 20px);
                font-weight: 400;
                line-height: 1.1;
                letter-spacing: 0.1em;
                margin-right: calc(0.1em * -1);
                text-transform: uppercase;
                margin-bottom: 1rem;
            }
        }

        &::before,
        &::after {
            display: none;
        }

        a:hover {

            border-bottom: 3px solid var(--color-primary);

            p {
                color: var(--color-primary);
            }
        }
    }


    .image-navigation {
        display: flex;
        justify-content: flex-end;

        button {
            border:none;
            background-color: transparent;
            color: var(--color);
            font-size: 1.6rem;
        }
    }

}


main#ssfd[data-theme="vision"] {
    --background: #fff;
    --color: #000;

    .centered h1 {
        font-weight: 300;
    }


}





@media (max-width: 590px) {

    main#ssfd {


        .gallery {
            --aspect-ratio: 3 / 2;
        }


    }
}