section #cta {
    position: relative;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: start;
    width: var(--the-width);
    margin: 0 auto;
    height: 100%;
    min-height: 100vh;

    & > div.section-sticky {
        grid-column: 9 / span 4;
        grid-row: 1;
        z-index: 10;
        align-self: center;
    }

    & h2 {
        font-size: var(--fs-lg);
        letter-spacing: -0.03em;
        position: unset;
    }

    .cta-media,
    .cta-media img {
        display: block;
        width: 100vw;
        max-width: 100vw;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }

    .cta-media {
        grid-row: 1;
        grid-column: 1 / -1;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

@media (max-width: 64rem) {
    section #cta {
        min-height: 100vh;

        & > div.section-sticky {
            grid-column: 5 / span 4;
            position: sticky;
            top: 20vh;
        }
    }
}

@media (max-width: 48rem) {
    section #cta {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        min-height: 110vh;

        & > div.section-sticky,
        .cta-media {
            grid-column: 1 / -1;
        }

        & > div.section-sticky {
            position: static;
            top: auto;
            align-self: start;
            grid-row: 2;
        }

        .cta-media {
            grid-row: 1;
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
            min-height: 55vh;
        }

        .cta-media img {
            width: 100%;
            max-width: 100%;
            min-height: 55vh;
        }
    }
}