.block-hero-banner{
    height: var(--hero-banner-height);
    @apply grid-container overflow-hidden mb-10;
    &__img{
        @apply w-full h-full;
        img{
            @apply w-full h-full object-cover;
        }
    }
}

.block-home-scroll-banner{
    //height: 160vh;
    @apply mb-base md:mb-lg xl:mb-xl;
    &__video{
        @screen lg{
            height: calc(var(--home-scroll-banner-img-height) - var(--grid-gutter)*2);
        }
        @apply aspect-video md:aspect-auto relative grid-container overflow-hidden mb-[calc(var(--grid-gutter)*2)] z-30;
        video{
            @apply w-full h-full object-cover;
        }
    }
    &__title{
        /* @apply sticky top-[100px] z-10 pt-8;  */
        @apply lg:sticky top-0 bottom-[calc(var(--grid-gutter)*2)] md:pt-[calc(var(--grid-gutter)*2)] z-20 mb-0;
    }
    &__images{
        height: 200vw;
        @screen lg{
            height: 120vw;
        }
        @apply md:pt-[10vw] lg:pt-[20vw] relative z-10;
        .block-home-scroll-banner-img{
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
         
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            -ms-perspective: 1000;
            perspective: 1000;
         
            will-change: transform, opacity; /* Prevents flicker in Safari */
            transition: opacity .2s linear;

            @apply w-1/2 lg:w-1/3 opacity-0;
            picture{
                @apply aspect-square overflow-hidden;
                img{
                    @apply w-full h-full object-cover;
                }
            }
            &:first-child{
                margin-left: calc(100% / 12 * 5);
                @screen lg{
                    margin-left: calc(100% / 12 * 7);
                }
            }
            &:nth-child(2){
                margin-left: calc(100% / 12 * 1);
            }
            &:nth-child(3){
                margin-left: calc(100% / 12 * 6);
                @screen lg{
                    margin-left: calc(100% / 12 * 8);
                }
                @apply relative z-10;
            }
            &:nth-child(4){
                margin-left: calc(100% / 12 * 2);
                @screen lg{
                    margin-left: calc(100% / 12 * 5);
                }
                @apply relative z-0 mt-40;
            }
        }
    }
}