.home-intro {
    grid-template-rows: var(--m-md) repeat(5, auto) var(--m-md);
}

.home-intro .media-container {
    grid-area: 1/1/span 7/span 14;
    height: 100%;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    mix-blend-mode: lighten;
}

.home-intro .pre-headline {
    grid-area: 2/3/2/span 10;
    z-index: 1;
    max-width: 32ch;
    padding: .4em 0;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    height: fit-content;
}

.home-intro .logo-text {
    grid-area: 3/3/3/span 10;
    z-index: 1;
    width: 100%;
    max-width: max(128px, 13.75vw);
    height: auto;
}

.home-intro .headline {
    grid-area: 4/3/4/span 10;
    z-index: 1;
    max-width: 12ch;
}

.home-intro .text-container {
    grid-area: 5/3/5/span 10;
    z-index: 1;
    margin-top: 4em;
    max-width: 70ch;
}

.home-intro .btns-container {
    grid-area: 6/3/6/span 10;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .home-intro {
        grid-template-rows: var(--m-md) repeat(5, auto) var(--m-md);
    }

    .home-intro .media-container {
        grid-area: 1/1/span 3/span 14;
    }

    .home-intro .pre-headline {
        grid-area: 3/2/3/span 12;
        margin-bottom: var(--m-sm);
        align-self: flex-end;
    }

    .home-intro .logo-text {
        grid-area: 2/2/2/span 12;
        margin-top: calc(var(--m-lg) * .65);
    }

    .home-intro .headline {
        grid-area: 4/2/4/span 12;
        margin-top: var(--m-md);
    }

    .home-intro .text-container {
        grid-area: 5/2/5/span 12;
        margin-top: var(--m-sm);
    }

    .home-intro .btns-container {
        grid-area: 6/2/6/span 12;
        margin-top: var(--m-sm);
    }
}