.marquee {
   --gap: 1rem;
   display: flex;
   overflow: hidden;
   user-select: none;
   gap: var(--gap);
}

.marquee__content {
   flex-shrink: 0;
   display: flex;
   justify-content: space-around;
   min-width: 100%;
   gap: var(--gap);
   animation: scroll 50s linear infinite;
}

@keyframes scroll {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(calc(-100% - var(--gap)));
   }
}

@media (prefers-reduced-motion: reduce) {
   .marquee__content {
      animation-play-state: paused !important;
   }
}