.home-intro .media-container {
    position: relative;
    grid-area: 1/3/1/span 10;
    aspect-ratio: 1920/1048;
}

.home-intro .info-btns-container {
    grid-area: 1/2/1/span 12;
    justify-self: flex-end;
    align-self: flex-end;
    margin-bottom: max(48px, 6.09375vw);
    z-index: 1;
}

.home-intro .info-btns-container .border-btn {
    font-size: max(12px, 0.859375vw);
}

.home-intro .info-btns-container .border-btn .btn-number {
    font-size: max(16px, 1.7578125vw);
    letter-spacing: 0;
    min-width: 2ch;
    text-align: center;
    margin: -.5em .5em -.5em 0;
}

.home-intro .scroll-down {
    grid-area: 2/2/2/span 12;
    justify-self: center;
    gap: 10px;
}

.home-intro .scroll-down .icon.arrow-scroll-down {
    display: block;
    height: max(24px, 1.25vw);
    aspect-ratio: 18/32;
    mask: url(../../img/arrow-scroll-down.svg) center/contain no-repeat;
    -webkit-mask: url(../../img/arrow-scroll-down.svg) center/contain no-repeat;
    background: currentColor;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
}

.home-intro .scroll-down .icon.arrow-scroll-down:nth-child(2) {
    animation-delay: .25s;
}

.home-intro .scroll-down .icon.arrow-scroll-down:nth-child(3) {
    animation-delay: .5s;
}

@keyframes bounce {
    0% {
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%);
    }
    75% {
        -webkit-transform: translateY(30%);
        transform: translateY(30%);
    }
    100% {
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%);
    }
}

.home-intro .sticker-container {
    grid-area: 3/4/3/span 2;
    justify-self: center;
}

.home-intro .headline {
    grid-area: 3/2/3/span 12;
    margin-bottom: 0.76em;
}

.home-intro .sub-headline {
    grid-area: 4/2/4/span 12;
    margin-bottom: max(48px, 6.40625vw);
}

.home-intro .pre-headline {
    grid-area: 5/4/5/span 4;
}

.home-intro .text-container {
    grid-area: 6/4/6/span 4;
}

.home-intro .btns-container {
    grid-area: 7/4/7/span 4;
}

.home-intro .img-container {
    grid-area: 4/10/span 5/span 4;
    aspect-ratio: 746/828;
}

.home-intro .img-text {
	grid-area: 4/10/4/span 4;
	align-self: flex-end;
	transform: rotate(-10deg);
	margin-bottom: max(16px, 1.25vw);
	margin-left: max(16px, 1.25vw);
}

@media (max-width: 991.98px) {
    .home-intro .sticker-container {
        grid-area: 3/3/3/span 2;
    }
    
    .home-intro .pre-headline {
        grid-area: 5/3/5/span 5;
    }
    
    .home-intro .text-container {
        grid-area: 6/3/6/span 5;
    }
    
    .home-intro .btns-container {
        grid-area: 7/3/7/span 5;
        margin-top: var(--m-60);
    }
    
    .home-intro .img-container {
        grid-area: 5/9/span 5/span 5;
    }
    
    .home-intro .img-text {
        grid-area: 5/9/span 2/span 4;
        align-self: flex-start;
        margin-top: max(32px, 5vw);
    }
}
  
@media (max-width: 767.98px) {
    .home-intro .media-container {
        grid-area: 1/2/1/span 12;
    }
    
    .home-intro .info-btns-container {
        grid-area: 2/2/2/span 12;
        justify-self: flex-start;
        margin: var(--m-small) 0 var(--m-medium);
    }
    
    .home-intro .scroll-down {
        grid-area: 3/2/3/span 12;
    }

    .home-intro .sticker-container {
        grid-area: 4/3/4/span 3;
        justify-self: flex-start;
    }
    
    .home-intro .headline {
        grid-area: 4/2/4/span 12;
    }
    
    .home-intro .sub-headline {
        grid-area: 5/2/5/span 12;
    }

    .home-intro .pre-headline {
        grid-area: 6/3/6/span 10;
    }

    .home-intro .text-container {
        grid-area: 7/3/7/span 10;
    }

    .home-intro .btns-container {
        grid-area: 8/3/8/span 10;
        justify-content: flex-end;
    }

    .home-intro .img-container {
        grid-area: 9/3/9/span 10;
        margin-bottom: var(--m-small);
    }

    .home-intro .img-text {
        grid-area: 9/4/9/span 8;
        margin-top: max(48px, 10vw);
    }
}

@media (max-width: 575.98px) {
    .home-intro .media-container {
        grid-area: 1/1/1/span 14;
        aspect-ratio: 1920/1280;
    }

    .home-intro .sticker-container {
        grid-area: 4/2/4/span 12;
        margin-bottom: var(--m-60);
    }

    .home-intro .headline {
        grid-area: 5/2/5/span 12;
    }

    .home-intro .sub-headline {
        grid-area: 6/2/6/span 12;
    }

    .home-intro .pre-headline {
        grid-area: 7/2/7/span 12;
    }

    .home-intro .text-container {
        grid-area: 8/2/8/span 12;
    }

    .home-intro .btns-container {
        grid-area: 9/2/9/span 12;
    }

    .home-intro .img-text {
        grid-area: 10/3/10/span 10;
    }

    .home-intro .img-container {
        grid-area: 10/2/10/span 12;
    }
}