body {
  --scroll-gap: 20px;
}
@media only screen and (max-width: 430px) {
  body {
    --scroll-gap: 10px;
  }
}

@keyframes infiniteScrollRTL {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      calc(
        -1 * (100% / var(--_infinite-scroll-clone-length)) - var(
            --_infinite-scroll-gap,
            var(--scroll-gap)
          ) / var(--_infinite-scroll-clone-length)
      )
    );
  }
}

@keyframes infiniteScrollLTR {
  0% {
    transform: translateX(
      calc(
        -1 * (100% / var(--_infinite-scroll-clone-length)) - var(
            --_infinite-scroll-gap,
            var(--scroll-gap)
          ) / var(--_infinite-scroll-clone-length)
      )
    );
  }
  100% {
    transform: translateX(0);
  }
}

.js-scrollTrack {
  width: max-content;
}

.js-scrollTrack[data-scroll-initialized="true"][data-scroll-direction="left"] {
  animation: infiniteScrollRTL var(--_infinite-scroll-duration) linear
    infinite;
}
.js-scrollTrack[data-scroll-initialized="true"][data-scroll-direction="right"] {
  animation: infiniteScrollLTR var(--_infinite-scroll-duration) linear
    infinite;
}
.js-scrollTrack[data-scroll-pause-on-hover="true"]:hover {
  animation-play-state: paused !important;
} 

.js-scrollList {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 var(--_infinite-scroll-gap, var(--scroll-gap));
}

.js-scrollCont {
  flex-shrink: 0;
}