.marquee {
  flex-direction: column;
  margin-top: 60px;
}
.wrapper {
  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),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

.wrapper:nth-child(2) {
  margin-top: 2rem;
}

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

@keyframes scrollRight {
  to {
    right: -200px;
  }
}

.itemLeft,
.itemRight {
  font-weight: 600;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  gap: 10px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  width: 200px;
  height: 100px;
  background-color: #64cbff;
  opacity: 1;
  background: linear-gradient(135deg, #38b6ff55 25%, transparent 25%) -35px 0/
      70px 70px,
    linear-gradient(225deg, #38b6ff 25%, transparent 25%) -35px 0/ 70px 70px,
    linear-gradient(315deg, #38b6ff55 25%, transparent 25%) 0px 0/ 70px 70px,
    linear-gradient(45deg, #38b6ff 25%, #64cbff 25%) 0px 0/ 70px 70px;
  border-radius: 0.5rem;
  position: absolute;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

.itemLeft {
  left: max(calc(200px * 8), 100%);
  animation-name: scrollLeft;
}

.itemRight {
  right: max(calc(200px * 8), calc(100% + 200px));
  animation-name: scrollRight;
}

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

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

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

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

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

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

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

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