/* Hide horizontal scrollbar and contain the track */
.slider-container {
  width: 100%;
  overflow: hidden;
  background: #f4f4f4;
  padding: 20px 0;
  display: flex;
}

/* Track holding the images flexed in a row */
.slider-track {
  display: flex;
  width: calc(200px * 8 + 160px); /* (Image width * total images) + total margins */
  animation: scrollContinuous 20s linear infinite;
}

/* Individual image styling */
.slider-track img {
  width: 150px;
  height: 80px;
  margin: 0 10px;
  border-radius: 8px;
  object-fit: cover;
}

/* Infinite loop keyframes - moves exactly half of the track width */
@keyframes scrollContinuous {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 4 - 80px)); /* Moves past the first 4 images */
  }
}

/* Optional: Pause scrolling when hovering over images */
.slider-container:hover .slider-track {
  animation-play-state: paused;
}