body {
    display: flex;
    height: 100dvh;
    overflow: hidden;

    &::before {
        content: "";

        position: absolute;
        width: 100%;
        height: 100%;

        background: url(../img/onboarding.svg) no-repeat left bottom / cover;
    }
}

main#onboarding {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: min-content 1fr min-content;

    position: relative;
    max-height: 100dvh;
    width: 100%;
    padding: 5rem 5% 1rem;
    margin-bottom: 0;

    overflow: hidden;

    @media screen and (max-width: 992px) {
        align-self: center;
        grid-template-columns: auto min-content min-content auto;
        grid-template-rows: min-content min-content auto;

        row-gap: 2rem;
        align-items: center;

        padding-top: 0;
        padding-bottom: .5rem;
    }

    &::before {
        content: "";

        grid-area: 1 / 1 / -1 / -1;
        justify-self: center;

        width: min(calc(2dvw / 3 * 100), 100%);
        aspect-ratio: 1;
        border-radius: 50%;
        z-index: -1;

        background-color: var(--secondary-color);

        @media screen and (max-width: 992px) {
            width: calc(100%);
            /*top: 70%;*/
        }
    }

    h1 {
        /*font-size: 125px;*/
        font-size: 7dvw;
        text-transform: uppercase;
    }

    h2#onboarding__year {
        grid-area: 1 / 1 / 2 / 2;

        /*font-size: 50px;*/
        font-size: 5dvw;
        text-transform: uppercase;
        font-style: italic;

        @media screen and (max-width: 992px) {
            grid-area: 1 / 2 / 2 / 3;
            text-align: center;
        }
    }

    h1#onboarding__title--first {
        grid-area: 2 / 1 / 3 / 2;
        text-align: left;

        @media screen and (max-width: 992px) {
            grid-area: 2 / 2 / 3 / 3;
            text-align: right;
        }
    }

    h1#onboarding__title--last {
        grid-area: 2 / -2 / -2 / -1;
        text-align: right;

        @media screen and (max-width: 992px) {
            grid-area: 2 / 3 / 3 / 4;
            text-align: left;
        }
    }

    #onboarding__title--illus {
        position: relative;
        grid-area: 2 / 1 / 4 / 3;

        height: 100%;
        justify-self: center;
        align-self: end;

        z-index: -1;
        aspect-ratio: 0.65;

        img {
            height: 100%;
            object-fit: contain;
        }

        @media screen and (max-width: 1600px) {
            max-height: 50dvw;
        }

        @media screen and (max-width: 992px) {
            grid-area: 3 / 2 / 4 / 4;
            max-height: none;
            width: 100%;

            img {
                position: absolute;
                width: 100%;
            }
        }
    }

    #onboarding__cta {
        grid-area: 3 / 1 / 3 / 2;

        place-self: center;
        white-space: nowrap;
        gap: .5rem;

        @media screen and (max-width: 992px) {
            grid-area: 3 / 2 / 3 / 4;
            justify-self: center;
            align-self: flex-end;

            margin-bottom: -.5rem;
        }
    }

    #onboarding__logo {
        grid-area: -2 / -2 / -1 / -1;
        width: 100%;

        @media screen and (max-width: 992px) {
            grid-area: 1 / 3 / 2 / 4;
            align-self: center;
        }
    }
}