@layer components {
    @media (max-width: 750px) {

        /* ###############
           #### Intro ####
           ############### */
        .intro {
            grid-template-columns: 1fr;
            row-gap: var(--spacer-vertical);
        }

        .intro__photo {
            justify-self: center;
            aspect-ratio: 1 / 1;
            inline-size: 38.196601125%;
            margin-bottom: 0;
        }

        .intro__text {
            grid-row: 2;
        }

        /* @supports not (aspect-ratio: 1 / 1) {
            .intro__photo::before {
                content: "";
                display: block;
                padding-top: 100%;
            }

            .intro__photo img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }
        } */
    }

    @media (max-width: 550px) {

        /* ######################
           #### Publications ####
           ###################### */
        :root {
            --graphical-abstract-square-ratio: 0.236068;
        }
    }
}