.scroll-container {
  /* Hide overflowing content */
  overflow: hidden; 
  /* Define a specific width/max-width */
  max-width: 100%; 
}

.scroll-wrapper {
  /* Use flexbox to align content items horizontally */
  display: flex;
  /* Prevent content from wrapping */
  white-space: nowrap; 
  /* Ensure the wrapper expands to fit all content */
  width: max-content; 
  /* Apply the animation */
  animation: continuousScroll 20s linear infinite; 
}

.content-item {
  /* Prevents the items from shrinking */
  flex-shrink: 0; 
  /* Add some spacing */
  padding: 0 1rem; 
}

/* Define the animation */
@keyframes continuousScroll {
  0% {
    /* Start at the original position */
    transform: translateX(0); 
  }
  100% {
    /* Move the content by 50% of its total width to the left */
    /* This makes the second copy perfectly align where the first started */
    transform: translateX(-50%); 
  }
}
.scroll-container:hover .scroll-wrapper {
  animation-play-state: paused;
}