<div class="marquee marquee--3">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=1" width="150" height="150" alt="">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=2" width="150" height="150" alt="">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=3" width="150" height="150" alt="">
</div>
<div class="marquee marquee--3 marquee--omega">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=1" width="150" height="150" alt="">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=2" width="150" height="150" alt="">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=3" width="150" height="150" alt="">
</div>

.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--3 {
  --marquee-item-width: 150px;
  --marquee-item-height: 150px;
  --marquee-duration: 24s;
  --marquee-items: 3;
}

.marquee--omega {
  --marquee-max-width: min(600px, 90vw);
  max-inline-size: var(--marquee-max-width);
  margin-inline: auto;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 10%,
    hsl(0 0% 0% / 1) 90%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__item {
  --marquee-item-offset: max(
    calc(var(--marquee-item-width) * var(--marquee-items)),
    calc(100% + var(--marquee-item-width))
  );
  --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
  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(3n) {
  border-top-right-radius: 1rem;
}

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

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

.marquee--3 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}

.marquee--3 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

.marquee--3 .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}

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

/*@media (prefers-reduced-motion) {
  .marquee {
    justify-content: space-evenly;
    mask-image: unset;
  }
  
  .marquee__item {
    position: unset;
    inset-inline-start: unset;
    transform: unset;
  }

  @keyframes go {
    to {  
      inset-inline-start: unset;
    }
  }
}*/

@media (prefers-reduced-motion) {
  .marquee__item {
    animation-play-state: paused;
  }
}