.wrapper {
  /*margin-top: 2rem;*/
  width: 90%;
  max-width: 1536px;
  margin-inline: auto;
  height: 100px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}
@keyframes scrollLeft {
  to {
    left: -200px;
  }
}
@keyframes scrollRight {
  to {
    right: -200px;
  }
}
.itemLeft, .itemRight {
  width: 200px;
  height: 100px;
  background-color: transparent;
  border-radius: 6px;
  position: absolute;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  display: flex;
  align-items: center;
}
.itemLeft {
  left: max(calc(200px * 5), 100%);
  animation-name: scrollLeft;
}
.itemRight {
  right: max(calc(200px * 6), calc(100% + 200px));
  animation-name: scrollRight;
}
.itemi1 {
  animation-delay: calc(30s / 5 * (5 - 1) * -1);
}
.itemi2 {
  animation-delay: calc(30s / 5 * (5 - 2) * -1);
}
.itemi3 {
  animation-delay: calc(30s / 5 * (5 - 3) * -1);
}
.itemi4 {
  animation-delay: calc(30s / 5 * (5 - 4) * -1);
}
.itemi5 {
  animation-delay: calc(30s / 5 * (5 - 5) * -1);
}
.itemb1 {
  animation-delay: calc(30s / 6 * (6 - 1) * -1);
}
.itemb2 {
  animation-delay: calc(30s / 6 * (6 - 2) * -1);
}
.itemb3 {
  animation-delay: calc(30s / 6 * (6 - 3) * -1);
}
.itemb4 {
  animation-delay: calc(30s / 6 * (6 - 4) * -1);
}
.itemb5 {
  animation-delay: calc(30s / 6 * (6 - 5) * -1);
}
.itemb6 {
  animation-delay: calc(30s / 6 * (6 - 6) * -1);
}