.carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
  display: flex;
  gap: 2rem; /* gap-8 is 2rem */
  width: max-content;
  animation: scroll 40s linear infinite;
}

.carousel-track:hover {
  animation-play-state: paused;
}

.carousel-track.reverse {
  animation-direction: reverse;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}