.intro-media-headline-btns .media-container {
    grid-area: 1/1/span 3/span 14;
    height: 100vh;
    height: 100svh;
    min-height: 100%;
    z-index: 0;
}

.intro-media-headline-btns .media-container::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    opacity: var(--overlay-opacity);
    z-index: 1;
    mix-blend-mode: multiply;
}

.intro-media-headline-btns .badge-icon {
    grid-area: 2/3/2/span 10;
    width: 100%;
    max-width: max(150px, 11.71875vw);
    aspect-ratio: 300/288;
    z-index: 2;
    mask: url(../../img/hotel-victoria-badge.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/hotel-victoria-badge.svg) no-repeat center/contain;
    background: currentColor;
}

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

.intro-media-headline-btns .content-container .headline {
    margin-bottom: .5em;
}

.intro-media-headline-btns .scroll-btn {
    display: flex;
    align-items: center;
    gap: .75em;
	grid-area: 3/2/3/2;
	z-index: 2;
	color: var(--white);
	font-family: "Vollkorn";
	font-size: var(--fs-30);
	font-weight: 400;
	line-height: 1.3;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    width: fit-content;
}

.intro-media-headline-btns .scroll-btn::before {
    content: "";
    display: block;
    height: 1em;
    aspect-ratio: 13/10;
    mask: url(../../img/arrow-scroll.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/arrow-scroll.svg) no-repeat center/contain;
    background: currentColor;
    transform: rotate(90deg);
}

.intro-media-headline-btns .social-btns-container {
    grid-area: 2/13/span 2/13;
    z-index: 2;
    gap: 10px;
}

.intro-media-headline-btns .social-btns-container .icon-btn.instagram::after {
	width: 45%;
}

@media (max-width: 991.98px) {
    .intro-media-headline-btns .media-container {
        grid-area: 1/1/span 4/span 14;
    }
    
    .intro-media-headline-btns .badge-icon {
        grid-area: 2/2/2/span 12;
        margin: max(192px, 15vw) 0 0;
    }

    .intro-media-headline-btns .content-container {
        grid-area: 3/2/3/span 12;
        margin: var(--m-md) 0;
    }

    .intro-media-headline-btns .content-container .headline {
        text-align: center;
    }

    .intro-media-headline-btns .content-container .btns-container {
        flex-direction: column;
        gap: 10px;
        width: fit-content;
    }
    
    .intro-media-headline-btns .content-container .btns-container .default-btn {
        width: 100%;
    }

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

    .intro-media-headline-btns .social-btns-container {
        grid-area: 4/13/4/13;
    }

}