.home-intro .media-wrapper {
    display: flex;
    grid-area: 1/1/1/span 14;
    height: calc(100vh + max(16px, 1.5625vw));
    height: calc(100svh + max(16px, 1.5625vw));
    border-radius: 0 0 max(16px, 1.5625vw) max(16px, 1.5625vw);
    overflow: hidden;
    position: relative;
}

.home-intro .media-wrapper .media-container {
    aspect-ratio: 2560/1440;
    min-height: 101%;
    min-width: 101%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.home-intro .media-container .overlay-link {
	position: absolute;
	top: 45.8%;
	left: 69.925%;
	width: 4.35%;
	aspect-ratio: 1/1;
	background: transparent;
	border-radius: 100%;
	text-decoration: none;
	z-index: 3;
}

@media (orientation: portrait) {
    .home-intro .media-wrapper .media-container {
        aspect-ratio: 1440/1920;
    }

    .home-intro .media-container .overlay-link {
        top: 50.25%;
        left: 50%;
        width: 9.25%;
        min-height: 3em;
        transform: translate(-50%,-50%);
    }
}

.home-intro .media-container .overlay-link::before,
.home-intro .media-container .overlay-link::after {
    content: "";
    display: block;
    height: 50%;
    width: auto;
    aspect-ratio: 3/2;
    background: var(--black);
    top: 50%;
    transform: translate(-120%, -50%);
    position: absolute;
    pointer-events: none;
}

.home-intro .media-container .overlay-link::before {
    mask: url(../../img/arrow-right.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/arrow-right.svg) no-repeat center/contain;
    animation: moveRight 1.5s ease-in-out infinite;
}

@keyframes moveRight {
    0% {
        transform: translate(-120%, -50%);
    }
    50% {
        transform: translate(-130%, -50%);
    }
    100% {
        transform: translate(-120%, -50%);
    }
}

.home-intro .media-container .overlay-link::after {
    right: 0;
    transform: translate(120%, -50%);
    position: absolute;
    mask: url(../../img/arrow-left.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/arrow-left.svg) no-repeat center/contain;
    animation: moveLeft 1.5s ease-in-out infinite;
}

@keyframes moveLeft {
    0% {
        transform: translate(120%, -50%);
    }
    50% {
        transform: translate(130%, -50%);
    }
    100% {
        transform: translate(120%, -50%);
    }
}

.home-intro .content-container {
    grid-area: 1/1/1/span 14;
    max-height: 100vh;
    max-height: 100dvh;
    padding-bottom: var(--m-small);
	z-index: 2;
    align-self: flex-end;
    pointer-events: none;
}

.home-intro .content-container .fire-animation svg {
    max-width: max(460px, 40.3125vw);
    width: 100%;
    height: auto;
}

.home-intro .content-container .fire-animation svg .flames {
    position: relative;
}

.home-intro .content-container .fire-animation svg .flames .flame {
    animation-name: flameWobble;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.home-intro .content-container .fire-animation svg .flames .flame.one {
    animation-duration: 3.7s;
    animation-delay: 1s;
}

.home-intro .content-container .fire-animation svg .flames .flame.two {
    animation-duration: 2.8s;
    animation-delay: 2s;
}

.home-intro .content-container .fire-animation svg .flames .flame.three {
    animation-duration: 2.1s;
    animation-delay: 3s;
}

@keyframes flameWobble {
    50% {
        transform: scaleY(1.1);
    }
}

.home-intro .content-container .scroll-down-btn {
    margin-top: 16px;
    color: var(--white);
    pointer-events: all;
}

@media (max-width: 991.98px) {
    .home-intro .content-container {
        flex-direction: column;
        align-self: flex-end;
        align-items: flex-start;
        gap: var(--grid-gap);
    }
}