main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#opening {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content min-content min-content;
    gap: 1rem;
    justify-items: center;
    padding: 0 1rem;
}

#opening img {
    width: clamp(10rem, 100%, 36rem);
    object-fit: cover;
    max-height: 50vh;
}

#opening h1 {
    align-self: end;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    white-space: pre;
}

#opening h6 {
    align-self: start;
    text-align: justify;
}

#over {
    margin: 0 auto;
    width: clamp(10rem, 90vw, 36rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#over p q {
    display: none;
}

#over img {
    width: 100%;
}

#over #about-photo-thijmen {
    max-height: 50vh;
    object-fit: cover;
}

#over div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 576px) {
    #over p q {
        display: block;
        padding: 1rem;
        font-style: italic;
        width: 50%;
        float: right;
        font-size: clamp(1.0625rem, 2.5vw, 1.125rem);
    }
}

#arrow-down {
    display: none;
}


@media (min-width: 992px) {
    #opening {
        grid-template-areas:
            ". img img"
            "title img img"
            "subtitle img img"
            ". img img"
        ;
        justify-items: start;
        grid-template-columns: 5fr 2fr 6fr;
        grid-template-rows: auto min-content min-content auto;
        margin: 0 3rem;
        column-gap: 2rem;
        height: calc(100vh - 14rem);
    }

    @keyframes arrow-down {
        0% {
            transform: translateY(0%);
        }

        50% {
            transform: translateY(-50%);
        }

        100% {
            transform: translateY(0%);
        }
    }

    #arrow-down {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    #arrow-down svg {
        z-index: -1;
        fill: black;
        width: 2.5rem;
        height: 2.5rem;
        animation: arrow-down 1s infinite;
    }


    #opening img {
        grid-area: img;
        width: 100%;
        align-self: center;
    }

    #opening h1 {
        color: #f4a816;
        grid-area: title;
        justify-self: end;
        grid-column: 1 / 3;
        line-height: 1;
    }

    #opening h1 #name-text {
        display: block;
        margin-left: 6rem;

    }

    #opening h6 {
        grid-area: subtitle;
    }

    #opening h6::first-letter {
        padding-left: 3rem;
    }

    #over {
        display: grid;
        grid-template-areas:
            "title . txt1 txt1 txt1"
            "img1 img1 img2 img2 ."
            "img1 img1 . . ."
            "txt2 txt2 . title-end title-end"
        ;
        margin: 0 auto;
        width: clamp(896px, calc(100vw - 6rem), 100rem);
        grid-template-columns: max-content 3fr 2fr 2fr 2fr;
        gap: 2rem;
    }

    #over h2, #over h4 {
        text-transform: uppercase;
    }

    #over #about-title {
        grid-area: title;
    }

    #over #about-photo-thijmen {
        grid-area: img1;
    }

    #over #about-photo-ford {
        grid-area: img2;
        max-height: 25vh;
        object-fit: cover;
    }

    #over #about-text-1 {
        grid-area: txt1;
    }

    #over #about-text-2 {
        grid-area: txt2;
    }

    #over #about-title-end {
        grid-area: title-end;
    }

    @supports (aspect-ratio: 1 / 1) {
        #over #about-photo-thijmen {
            max-height: unset;
            aspect-ratio: 1 / 1;
        }

        #over #about-photo-ford {
            aspect-ratio: 3 / 2;
            max-height: unset;
        }

    }
}