.marquee {
  display: flex;
  block-size: var(--marquee-item-height);
  margin-block: var(--marquee-item-height);
  position: relative;
  overflow-x: hidden;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee--6 {
  --marquee-item-width: 784;
  --marquee-item-height: 100px;
  --marquee-duration: 20s;
}

.marquee__item {
  --marquee-item-offset: max(
    784px, /* width of all items */
    calc(100% + 784px)
  );
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  transform: translateX(-50%);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}

.marquee__item:nth-child(4n) {
  border-top-right-radius: 1rem;
}

.marquee__item:nth-child(4n + 1) {
  border-bottom-right-radius: 1rem;
}

.marquee__item:nth-child(4n + 2) {
  border-bottom-left-radius: 1rem;
}

.marquee__item:nth-child(4n + 3) {
  border-top-left-radius: 1rem;
}

.marquee--6 .marquee__item:nth-of-type(1) {
  --marquee-delay: calc(var(--marquee-duration) * (684 / 784 * -1));
  --marquee-item-width: 100px;
}

.marquee--6 .marquee__item:nth-of-type(2) {
  --marquee-delay: calc(var(--marquee-duration) * (534 / 784 * -1));
  --marquee-item-width: 150px;
}

.marquee--6 .marquee__item:nth-of-type(3) {
  --marquee-delay: calc(var(--marquee-duration) * (409 / 784 * -1));
  --marquee-item-width: 125px;
}

.marquee--6 .marquee__item:nth-of-type(4) {
  --marquee-delay: calc(var(--marquee-duration) * (299 / 784 * -1));
  --marquee-item-width: 110px;
}

.marquee--6 .marquee__item:nth-of-type(5) {
  --marquee-delay: calc(var(--marquee-duration) * (166 / 784 * -1));
  --marquee-item-width: 133px;
}

.marquee--6 .marquee__item:nth-of-type(6) {
  --marquee-delay: calc(var(--marquee-duration) * -1);
  --marquee-item-width: 166px;
}

@keyframes go {
  to {
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}