:root
{
    --cantidad-slides: 8;
    --count-slider: calc(var(--cantidad-slides) + 1);
    --height-slider: 45vw;
}

@keyframes animacion_slider 
{
    0%{transform: translateX(0)}
    12.5%{transform: translateX(-80vw)}
    25%{transform: translateX(-160vw)}
    37.5%{transform: translateX(-240vw)}
    50%{transform: translateX(-320vw)}
    62.5%{transform: translateX(-400vw)}
    75%{transform: translateX(-480vw)}
    87.5%{transform: translateX(-560vw)}
    100%{transform: translateX(-640vw)}
}

#new_slider 
{
    width: 80vw;
    margin: 100px 0 0 10vw;
    height: var(--height-slider);
    position: relative;
    overflow: hidden;
}

#new_slider>section 
{
    width:calc(80vw*var(--count-slider));
    height: var(--height-slider);
    animation-name: animacion_slider;
    animation-delay: 1s;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}

#new_slider>section img 
{
    float: left;
    width: 80vw;
    height: var(--height-slider);
    object-fit: cover;
}

@media screen and (max-width:768px)
{
    @keyframes animacion_slider 
    {
        0%{transform: translateX(0)}
        12.5%{transform: translateX(-11.11%)}
        25%{transform: translateX(-22.22%)}
        37.5%{transform: translateX(-33.33%)}
        50%{transform: translateX(-44.44%)}
        62.5%{transform: translateX(-55.55%)}
        75%{transform: translateX(-66.66%)}
        87.5%{transform: translateX(-77.77%)}
        100%{transform: translateX(-88.88%)}
    }

    :root
    {
        --height-slider: 50vh;
    }

    #new_slider 
    {
        width: 100%;
        margin: 0;
    }

    #new_slider>section 
    {
        width:calc(100%*var(--count-slider));
    }

    #new_slider>section img 
    {
        width:11.11%
    }
}