.lienzo-slider-cars-vertical{    

    & .acf-innerblocks-container{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        align-content: center;
        gap: var(--wp--preset--spacing--50);
        position: relative;
        overflow: hidden;
        height: 800px;

        &::before, &::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 300px;
            pointer-events: none;
            z-index: 1;
        }

        &::before{
            background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, rgba(255,255,255,0) 100%);
            top: 0;
        }

        &::after{
            background: linear-gradient(0deg, var(--wp--preset--color--primary) 0%, rgba(255,255,255,0) 100%);
            bottom: 0;
        }
    }
}

/* Animaciones para 3 columnas */
@media screen and (min-width: 1501px) {

    .lienzo-slider-cars-vertical .acf-innerblocks-container{

        & >*:nth-child(3n + 1) {
            animation: lienzo-slider-cars-vertical-scroll-down 10s linear infinite alternate;
        }
        
        & >*:nth-child(3n + 2) {
                animation: lienzo-slider-cars-vertical-scroll-up 10s linear infinite alternate;
        }
        
        & >*:nth-child(3n) {
            animation: lienzo-slider-cars-vertical-scroll-down 10s linear infinite alternate;
        }
    }
}

/* Animaciones para 2 columnas */
@media screen and (min-width: 1000px) and (max-width: 1500px) {
    .lienzo-slider-cars-vertical .acf-innerblocks-container{
        
        & >*:nth-child(2n + 1) {
            animation: lienzo-slider-cars-vertical-scroll-down 10s linear infinite alternate;
        }

        & >*:nth-child(2n) {
            animation: lienzo-slider-cars-vertical-scroll-up 10s linear infinite alternate;
        }
    }
}

/* Sin animación para 1 columna */
@media screen and (max-width: 999px) {
    .lienzo-slider-cars-vertical .acf-innerblocks-container{
        height: auto;

        & >* {
            animation: none;
        }
    }
    
}

@keyframes lienzo-slider-cars-vertical-scroll-down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

@keyframes lienzo-slider-cars-vertical-scroll-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@media screen and (max-width: 600px){
    .lienzo-slider-cars-vertical .acf-innerblocks-container{
        grid-template-columns: 1fr;
    }
}
