/* ANIMACION */
@keyframes scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* CELULAR: scroll manual con el dedo */
.carrusel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}

/* Esconde la barra de scroll fea */
.carrusel::-webkit-scrollbar {
  display: none;
}

/* DESKTOP: animacion automatica */
@media (min-width: 768px) {
  .carrusel {
    overflow: hidden;
    animation: scroll 20s linear infinite;
    width: max-content;
  }

  .carrusel:hover {
    animation-play-state: paused;
  }
}