*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

.wrapper {
  width: 90%;
  max-width: 1536px;
  margin-inline: auto;
  position: relative;
  height: 100px;
  margin-top: 5rem;
  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)
  );
}

@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

.item {
  position: absolute;
  left: max(calc(104px * 26), 100%);
  animation-name: scrollLeft;
  animation-duration: 35s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.item1 {
  animation-delay: calc(35s / 26 * (26 - 1) * -1);
}

.item2 {
  animation-delay: calc(35s / 26 * (26 - 2) * -1);
}

.item3 {
  animation-delay: calc(35s / 26 * (26 - 3) * -1);
}

.item4 {
  animation-delay: calc(35s / 26 * (26 - 4) * -1);
}

.item5 {
  animation-delay: calc(35s / 26 * (26 - 5) * -1);
}

.item6 {
  animation-delay: calc(35s / 26 * (26 - 6) * -1);
}

.item7 {
  animation-delay: calc(35s / 26 * (26 - 7) * -1);
}

.item8 {
  animation-delay: calc(35s / 26 * (26 - 8) * -1);
}

.item9 {
  animation-delay: calc(35s / 26 * (26 - 9) * -1);
}

.item10 {
  animation-delay: calc(35s / 26 * (26 - 10) * -1);
}
.item11 {
  animation-delay: calc(35s / 26 * (26 - 11) * -1);
}
.item12 {
  animation-delay: calc(35s / 26 * (26 - 12) * -1);
}
.item13 {
  animation-delay: calc(35s / 26 * (26 - 13) * -1);
}
.item14 {
  animation-delay: calc(35s / 26 * (26 - 14) * -1);
}
.item15 {
  animation-delay: calc(35s / 26 * (26 - 15) * -1);
}
.item16 {
  animation-delay: calc(35s / 26 * (26 - 16) * -1);
}
.item17 {
  animation-delay: calc(35s / 26 * (26 - 17) * -1);
}
.item18 {
  animation-delay: calc(35s / 26 * (26 - 18) * -1);
}
.item19 {
  animation-delay: calc(35s / 26 * (26 - 19) * -1);
}
.item20 {
  animation-delay: calc(35s / 26 * (26 - 20) * -1);
}
.item21 {
  animation-delay: calc(35s / 26 * (26 - 21) * -1);
}
.item22 {
  animation-delay: calc(35s / 26 * (26 - 22) * -1);
}
.item23 {
  animation-delay: calc(35s / 26 * (26 - 23) * -1);
}
.item24 {
  animation-delay: calc(35s / 26 * (26 - 24) * -1);
}
.item25 {
  animation-delay: calc(35s / 26 * (26 - 25) * -1);
}
.item26 {
  animation-delay: calc(35s / 26 * (26 - 26) * -1);
}

.wrapper:hover .item
{
    animation-play-state:paused
}