/*<div class="wrapper">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
</div>*/


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

* {
  margin: 0;
}

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



.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);
} */


/*<div class="wrapper">
  <div class="itemLeft item1"></div>
  <div class="itemLeft item2"></div>
  <div class="itemLeft item3"></div>
  <div class="itemLeft item4"></div>
  <div class="itemLeft item5"></div>
  <div class="itemLeft item6"></div>
  <div class="itemLeft item7"></div>
  <div class="itemLeft item8"></div>
</div>
<div class="wrapper">
  <div class="itemRight item1"></div>
  <div class="itemRight item2"></div>
  <div class="itemRight item3"></div>
  <div class="itemRight item4"></div>
  <div class="itemRight item5"></div>
  <div class="itemRight item6"></div>
  <div class="itemRight item7"></div>
  <div class="itemRight item8"></div>
</div>*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* * {
  margin: 0;
} */

body {
  background-color: #030712;
}

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

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

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

.item {
  width: 200px;
  height: 200px;
  background-color: #f7f7f7;
  
  border-radius: 6px;
  position: absolute;
  left: max(calc(200px * 8), 100%);
  animation-name: scrollLeft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.itemLeft,
.itemRight {
  width: 200px;
  height: 200px;
  /* background-color: #e11d48; */
  background-color: #f7f7f7;
  border-radius: 6px;
  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);
}

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

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

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

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

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

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

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

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