main {
    >picture img {
        anchor-name: --banner-img;
    }

    h1 {
        /* font-size: 2rem; */
        white-space: pre-line;
        text-align: left;
        padding-inline: 10vw;
        position: absolute;
        position-anchor: --banner-img;
        top: anchor(top);
        margin-top: 1em;
        font-family: 'noto-sans-extralight', sans-serif;
        max-width: 380px;

        span {
            font-size: smaller;
            /* white-space: pre-line; */
        }
    }

    h1+p {
        white-space: pre-line;
        text-align: center;
        font-weight: bold;
        font-size: 1.75em;
        padding-inline: 10vw;
        position: absolute;
        position-anchor: --banner-img;
        bottom: anchor(bottom);
        margin-bottom: 2em;
        font-family: 'noto-sans-extralight', sans-serif;
        display: none;
    }

    section {
        &:nth-of-type(2) {
            img {
                border-radius: 50%;
            }
        }
    }

    @media screen and (800px <=width) {
        h1 {
            max-width: none;
        }
    }

    @media screen and (1280px <=width) {
        h1+p {
            margin-bottom: 0;
            align-self: anchor-center;
            font-size: 2em;
            display: initial;
        }

        section {
            &:nth-of-type(1) {
                margin-bottom: 2em;
                column-gap: 6em;
                grid-template-columns: repeat(4, 1fr);
                grid-template-areas:
                    "_1 _1 _2 _2";

                img {
                    height: auto;
                }

                h2 {
                    white-space: pre-line;
                }

                p:nth-of-type(3) {
                    font-size: 1.75em;
                    font-weight: bold;
                }

                ul {
                    font-size: 1em;
                }
            }

            &:nth-of-type(2) {
                margin-bottom: 2em;
                grid-template-columns: repeat(5, 1fr);
                grid-template-areas:
                    "_1 _1 _1 _1 _1"
                    "_2 _3 _4 _5 _6";

                img {
                    border-radius: 50%;
                }
            }

            &:nth-of-type(3) {
                grid-template-areas:
                    "_1 _1 _1"
                    "_2 _2 ."
                    "_3 _3 ."
                    "_4 _4 .";

                p {
                    &:first-of-type {
                        font-size: 1.35em;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}