main {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}


.slider {
  width: 100%;

  height: var(--height);
  overflow: hidden;
  mask-image: linear-gradient(
      to right,
      transparent,
      #000 10% 90%,
      transparent
  );
}
.slider .list{
  display: flex;

  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative;

  grid-template-columns: repeat(var(--quantity), 1fr); gap: 80px;
}
.slider .list .item{
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 100%;
  margin-right: 80px;
  transition: filter 0.5s;
  animation: autoRun 70s linear infinite;
  animation-delay: calc( (80s / var(--quantity)) * (var(--position) - 1) - 10s)!important;
}

.slider .list .item .image-container{

margin-right: 80px;
}

.slider .list .item .image-container img{



  width: 100%;
  }
  

.slider .list .item img{

  width: 120%;
  margin-right: 100px;
}
@keyframes autoRun{
  from{
      left: 100%;
  }to{
      left: calc(var(--width) * -1);
  }
}
.slider:hover .item{
  animation-play-state: paused!important;
  filter: grayscale(1);
}
.slider .item:hover{
  filter: grayscale(0);
}
.slider[reverse="true"] .item{
  animation: reversePlay 80s linear infinite;
}
@keyframes reversePlay{
  from{
      left: calc(var(--width) * -1);
  }to{
      left: 130%;
  }
}


@media screen and (max-width: 768px) {



  .slider{
    max-width: 100%;
    width: 105%;
    height: 150px;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
  }

  
  .slider .list{
    display: flex;
    margin-right: 60px;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
    justify-content: space-between;
  }

  
  .slider .list .item{
    margin-right: 20px;
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    transition: filter 4.5s;
    /* *******cambiar aqui****** */
    animation-delay: calc( (90s / var(--quantity)) * (var(--position) - 1) - 15s)!important;
  }




  
  .slider .list .item img{
    width: 100%;
    margin-right: 20px;
  }

  
  @keyframes autoRun{
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
  }

  
  .slider:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(-1);
  }

  
  .slider .item:hover{
    filter: grayscale(0);
  }
  .slider[reverse="true"] .item{
        /* *******cambiar aqui****** */
    animation: reversePlay 90s linear infinite;
  }
  @keyframes reversePlay{
    from{
        left: calc(var(--width) * -1.5);
    }to{
        left: 120%;
    }
  }
  
  }