
body {
    --scroll-gap: 20px;
  }
  
  @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;

    &[data-scroll-initialized="true"][data-scroll-direction="left"] {
      animation: infiniteScrollRTL var(--_infinite-scroll-duration) linear
        infinite;
    }
    &[data-scroll-initialized="true"][data-scroll-direction="right"] {
      animation: infiniteScrollLTR var(--_infinite-scroll-duration) linear
        infinite;
    }
  }
  
  .js-scrollList {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 var(--_infinite-scroll-gap, var(--scroll-gap));
  }
  
  .js-scrollCont {
    flex-shrink: 0;
  }
  
  .scroll_wrap {
    width: 100%;
    overflow: hidden;
  }
  