.intro-media-headline-btns {
    grid-template-rows: 1fr auto;
}

.intro-media-headline-btns .media-container {
    grid-area: 1/1/span 2/span 14;
    width: 100%;
    height: calc(100vh - var(--header-height));
    height: calc(100svh - var(--header-height));
    min-height: fit-content;
    justify-self: center;
    z-index: 1;
}

.intro-media-headline-btns .media-container::after {
    content: "";
    display: block;
    width: 100%;
    height: 72.5%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--black) 100%);
    opacity: var(--overlay);
    mix-blend-mode: multiply;
}

.intro-media-headline-btns .joker-card {
    grid-area: 1/3/span 1/span 10;
    z-index: 1;
    margin: var(--m-md) 0 var(--m-sm) 0;
    justify-self: flex-end;
    width: 100%;
    max-width: max(128px, 8.828125vw);
}

.intro-media-headline-btns .content-container {
    grid-area: 2/3/span 1/span 9;
    z-index: 2;
}

.intro-media-headline-btns .scroll-btn {
    grid-area: 2/12/span 1/span 1;
    z-index: 2;
    font-size: var(--fs-20);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--m-md);
    aspect-ratio: 1/1;
    border: 2px solid currentColor;
    border-radius: 100%;
    padding: .35em;
}

.intro-media-headline-btns .scroll-btn::after {
    content: "";
    display: block;
    width: 52.5%;
    height: 52.5%;
    mask: url(../../img/arrow-down.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/arrow-down.svg) no-repeat center/contain;
    background: currentColor;
}

@media (max-width: 991.98px) {
    .intro-media-headline-btns .joker-card {
        grid-area: 1/2/span 1/span 12;
    }

    .intro-media-headline-btns .content-container {
        grid-area: 2/2/span 1/span 10;
        z-index: 2;
    }

    .intro-media-headline-btns .scroll-btn {
        grid-area: 2/12/span 1/span 2;
    }
}

@media (max-width: 575.98px) {
    .intro-media-headline-btns .content-container {
        grid-area: 2/2/span 1/span 12;
    }

    .intro-media-headline-btns .scroll-btn {
        display: none;
    }
}