.marquee-container {
  height: var(--item-height);
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );

  & > * {  
    --item-width-with-gap: calc(var(--item-width) + var(--gap, 0px));
    margin-right: var(--gap, 0px);
    width: var(--item-width);
    height: var(--item-height);
    position: absolute;
    left: max(calc(var(--item-width-with-gap) * var(--total-items)), 100%);
    animation-name: marquee;
    animation-duration: var(--animation-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: calc(var(--animation-duration) * 0.965 / var(--total-items) * (var(--total-items) - var(--idx)) * -1);  
  }
}

@keyframes marquee {
  to {
    left: calc(var(--item-width) * -1);
  }
}