main {
    margin-top: 4rem;
    margin-bottom: 3rem;

    display: grid;
    grid-template:
        "a b"
        "c d";
    gap: 1rem;

    @media screen and (max-width: 750px) {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    h3 {
        font-weight: 300;
    }

    p {
        line-height: 1.5;
    }

    section {
        img {
            width: 90%;
            height: 90%;
            padding: 1rem;
            object-fit: cover;
            object-position: center;
            border-radius: 15rem;
        }
    }
}

/*******************************************************************************
 *
 * Hero image
 *
 *******************************************************************************/

.hero {
    grid-area: header;

    user-select: none;
    position: relative;
    overflow: hidden;
    padding: 12rem 0;

    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: unset;

    .image {
        position: absolute;
        inset: 0;

        & > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        & > div {
            position: absolute;
            inset: 0;
            background: black;
            opacity: 0.6;
        }
    }

    .text {
        position: relative;
        height: 100%;
        z-index: 10;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;
        text-align: center;

        h1 {
            color: var(--tertiary-60);
            font-family: var(--font-title-emphasis), sans-serif;
            font-size: 4rem;
        }

        p {
            color: var(--tertiary-70);
            font-size: 1.5rem;
            font-weight: 400;
        }

        span {
            display: inline;
        }

        @media screen and (max-width: 750px) {
            h1 {
                font-size: 2rem;
            }

            span {
                display: block;
            }
        }
    }
}