.wrapper {
  width: 100%;
  max-width: 1536;
  margin-inline: auto;
  position: relative;
  /* height: 5em; */
  margin-top: 1rem;
  margin-bottom: 1rem;
  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 img {
  border-radius: 100%;
}

/* xs */
@media (min-width: 250px) and (max-width: 635px) {
  .wrapper {
    height: 100px;
  }

  .itemForward img,
  .itemReverse img {
    width: 100px;
    height: 100px;
  }

  @keyframes scrollLeft {
    to {
      left: -125px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -125px;
    }
  }
  
  .itemForward,
  .itemReverse {
    border-radius: 6px;
    position: absolute;
    animation-duration: 135s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .itemForward {
    left: max(calc(125px * 24), 100%);
    animation-name: scrollLeft;
  }
  
  .itemReverse {
    right: max(calc(125px * 24), 100%);
    animation-name: scrollRight;
  }
  
  .item1 {
    animation-delay: calc(135s / 24 * (24 - 1) * -1);
  }
  
  .item2 {
    animation-delay: calc(135s / 24 * (24 - 2) * -1);
  }
  
  .item3 {
    animation-delay: calc(135s / 24 * (24 - 3) * -1);
  }
  
  .item4 {
    animation-delay: calc(135s / 24 * (24 - 4) * -1);
  }
  
  .item5 {
    animation-delay: calc(135s / 24 * (24 - 5) * -1);
  }
  
  .item6 {
    animation-delay: calc(135s / 24 * (24 - 6) * -1);
  }
  
  .item7 {
    animation-delay: calc(135s / 24 * (24 - 7) * -1);
  }
  
  .item8 {
    animation-delay: calc(135s / 24 * (24 - 8) * -1);
  }
  
  .item9 {
    animation-delay: calc(135s / 24 * (24 - 9) * -1);
  }
  
  .item10 {
    animation-delay: calc(135s / 24 * (24 - 10) * -1);
  }
  
  .item11 {
    animation-delay: calc(135s / 24 * (24 - 11) * -1);
  }
  
  .item12 {
    animation-delay: calc(135s / 24 * (24 - 12) * -1);
  }
  
  .item13 {
    animation-delay: calc(135s / 24 * (24 - 13) * -1);
  }
  
  .item14 {
    animation-delay: calc(135s / 24 * (24 - 14) * -1);
  }
  
  .item15 {
    animation-delay: calc(135s / 24 * (24 - 15) * -1);
  }
  
  .item16 {
    animation-delay: calc(135s / 24 * (24 - 16) * -1);
  }
  
  .item17 {
    animation-delay: calc(135s / 24 * (24 - 17) * -1);
  }
  
  .item18 {
    animation-delay: calc(135s / 24 * (24 - 18) * -1);
  }
  
  .item19 {
    animation-delay: calc(135s / 24 * (24 - 19) * -1);
  }
  
  .item20 {
    animation-delay: calc(135s / 24 * (24 - 20) * -1);
  }
  
  .item21 {
    animation-delay: calc(135s / 24 * (24 - 21) * -1);
  }
  
  .item22 {
    animation-delay: calc(135s / 24 * (24 - 22) * -1);
  }
  
  .item23 {
    animation-delay: calc(135s / 24 * (24 - 23) * -1);
  }
  
  .item24 {
    animation-delay: calc(135s / 24 * (24 - 24) * -1);
  }
}

/* sm */
@media (min-width: 640px) {
  .wrapper {
    height: 125px;
    gap: 1rem;
  }
  
  .itemForward img,
  .itemReverse img {
    width: 125px;
    height: 125px;
  }
  
  @keyframes scrollLeft {
    to {
      left: -156.25px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -156.25px;
    }
  }
  
  .itemForward,
  .itemReverse {
    border-radius: 6px;
    position: absolute;
    animation-duration: 135s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .itemForward {
    left: max(calc(156.25px * 24), 100%);
    animation-name: scrollLeft;
  }
  
  .itemReverse {
    right: max(calc(156.25px * 24), 100%);
    animation-name: scrollRight;
  }
  
  .item1 {
    animation-delay: calc(135s / 24 * (24 - 1) * -1);
  }
  
  .item2 {
    animation-delay: calc(135s / 24 * (24 - 2) * -1);
  }
  
  .item3 {
    animation-delay: calc(135s / 24 * (24 - 3) * -1);
  }
  
  .item4 {
    animation-delay: calc(135s / 24 * (24 - 4) * -1);
  }
  
  .item5 {
    animation-delay: calc(135s / 24 * (24 - 5) * -1);
  }
  
  .item6 {
    animation-delay: calc(135s / 24 * (24 - 6) * -1);
  }
  
  .item7 {
    animation-delay: calc(135s / 24 * (24 - 7) * -1);
  }
  
  .item8 {
    animation-delay: calc(135s / 24 * (24 - 8) * -1);
  }
  
  .item9 {
    animation-delay: calc(135s / 24 * (24 - 9) * -1);
  }
  
  .item10 {
    animation-delay: calc(135s / 24 * (24 - 10) * -1);
  }
  
  .item11 {
    animation-delay: calc(135s / 24 * (24 - 11) * -1);
  }
  
  .item12 {
    animation-delay: calc(135s / 24 * (24 - 12) * -1);
  }
  
  .item13 {
    animation-delay: calc(135s / 24 * (24 - 13) * -1);
  }
  
  .item14 {
    animation-delay: calc(135s / 24 * (24 - 14) * -1);
  }
  
  .item15 {
    animation-delay: calc(135s / 24 * (24 - 15) * -1);
  }
  
  .item16 {
    animation-delay: calc(135s / 24 * (24 - 16) * -1);
  }
  
  .item17 {
    animation-delay: calc(135s / 24 * (24 - 17) * -1);
  }
  
  .item18 {
    animation-delay: calc(135s / 24 * (24 - 18) * -1);
  }
  
  .item19 {
    animation-delay: calc(135s / 24 * (24 - 19) * -1);
  }
  
  .item20 {
    animation-delay: calc(135s / 24 * (24 - 20) * -1);
  }
  
  .item21 {
    animation-delay: calc(135s / 24 * (24 - 21) * -1);
  }
  
  .item22 {
    animation-delay: calc(135s / 24 * (24 - 22) * -1);
  }
  
  .item23 {
    animation-delay: calc(135s / 24 * (24 - 23) * -1);
  }
  
  .item24 {
    animation-delay: calc(135s / 24 * (24 - 24) * -1);
  }
}


/* md */
@media (min-width: 768px) {
  .wrapper {
    height: 150px;
    gap: 1rem;
  }

  .itemForward img,
  .itemReverse img {
    width: 150px;
    height: 150px;
  }

  @keyframes scrollLeft {
    to {
      left: -200px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -200px;
    }
  }
  
  .itemForward,
  .itemReverse {
    border-radius: 6px;
    position: absolute;
    animation-duration: 135s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .itemForward {
    left: max(calc(200px * 24), 100%);
    animation-name: scrollLeft;
  }
  
  .itemReverse {
    right: max(calc(200px * 24), 100%);
    animation-name: scrollRight;
  }
  
  .item1 {
    animation-delay: calc(135s / 24 * (24 - 1) * -1);
  }
  
  .item2 {
    animation-delay: calc(135s / 24 * (24 - 2) * -1);
  }
  
  .item3 {
    animation-delay: calc(135s / 24 * (24 - 3) * -1);
  }
  
  .item4 {
    animation-delay: calc(135s / 24 * (24 - 4) * -1);
  }
  
  .item5 {
    animation-delay: calc(135s / 24 * (24 - 5) * -1);
  }
  
  .item6 {
    animation-delay: calc(135s / 24 * (24 - 6) * -1);
  }
  
  .item7 {
    animation-delay: calc(135s / 24 * (24 - 7) * -1);
  }
  
  .item8 {
    animation-delay: calc(135s / 24 * (24 - 8) * -1);
  }
  
  .item9 {
    animation-delay: calc(135s / 24 * (24 - 9) * -1);
  }
  
  .item10 {
    animation-delay: calc(135s / 24 * (24 - 10) * -1);
  }
  
  .item11 {
    animation-delay: calc(135s / 24 * (24 - 11) * -1);
  }
  
  .item12 {
    animation-delay: calc(135s / 24 * (24 - 12) * -1);
  }
  
  .item13 {
    animation-delay: calc(135s / 24 * (24 - 13) * -1);
  }
  
  .item14 {
    animation-delay: calc(135s / 24 * (24 - 14) * -1);
  }
  
  .item15 {
    animation-delay: calc(135s / 24 * (24 - 15) * -1);
  }
  
  .item16 {
    animation-delay: calc(135s / 24 * (24 - 16) * -1);
  }
  
  .item17 {
    animation-delay: calc(135s / 24 * (24 - 17) * -1);
  }
  
  .item18 {
    animation-delay: calc(135s / 24 * (24 - 18) * -1);
  }
  
  .item19 {
    animation-delay: calc(135s / 24 * (24 - 19) * -1);
  }
  
  .item20 {
    animation-delay: calc(135s / 24 * (24 - 20) * -1);
  }
  
  .item21 {
    animation-delay: calc(135s / 24 * (24 - 21) * -1);
  }
  
  .item22 {
    animation-delay: calc(135s / 24 * (24 - 22) * -1);
  }
  
  .item23 {
    animation-delay: calc(135s / 24 * (24 - 23) * -1);
  }
  
  .item24 {
    animation-delay: calc(135s / 24 * (24 - 24) * -1);
  }
}


/* lg */
@media (min-width: 1024px) {
  .wrapper {
    height: 175px;
  }

  .itemForward img,
  .itemReverse img {
    width: 175px;
    height: 175px;
  }

  @keyframes scrollLeft {
    to {
      left: -225px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -225px;
    }
  }
  
  .itemForward,
  .itemReverse {
    border-radius: 6px;
    position: absolute;
    animation-duration: 135s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .itemForward {
    left: max(calc(225px * 24), 100%);
    animation-name: scrollLeft;
  }
  
  .itemReverse {
    right: max(calc(225px * 24), 100%);
    animation-name: scrollRight;
  }
  
  .item1 {
    animation-delay: calc(135s / 24 * (24 - 1) * -1);
  }
  
  .item2 {
    animation-delay: calc(135s / 24 * (24 - 2) * -1);
  }
  
  .item3 {
    animation-delay: calc(135s / 24 * (24 - 3) * -1);
  }
  
  .item4 {
    animation-delay: calc(135s / 24 * (24 - 4) * -1);
  }
  
  .item5 {
    animation-delay: calc(135s / 24 * (24 - 5) * -1);
  }
  
  .item6 {
    animation-delay: calc(135s / 24 * (24 - 6) * -1);
  }
  
  .item7 {
    animation-delay: calc(135s / 24 * (24 - 7) * -1);
  }
  
  .item8 {
    animation-delay: calc(135s / 24 * (24 - 8) * -1);
  }
  
  .item9 {
    animation-delay: calc(135s / 24 * (24 - 9) * -1);
  }
  
  .item10 {
    animation-delay: calc(135s / 24 * (24 - 10) * -1);
  }
  
  .item11 {
    animation-delay: calc(135s / 24 * (24 - 11) * -1);
  }
  
  .item12 {
    animation-delay: calc(135s / 24 * (24 - 12) * -1);
  }
  
  .item13 {
    animation-delay: calc(135s / 24 * (24 - 13) * -1);
  }
  
  .item14 {
    animation-delay: calc(135s / 24 * (24 - 14) * -1);
  }
  
  .item15 {
    animation-delay: calc(135s / 24 * (24 - 15) * -1);
  }
  
  .item16 {
    animation-delay: calc(135s / 24 * (24 - 16) * -1);
  }
  
  .item17 {
    animation-delay: calc(135s / 24 * (24 - 17) * -1);
  }
  
  .item18 {
    animation-delay: calc(135s / 24 * (24 - 18) * -1);
  }
  
  .item19 {
    animation-delay: calc(135s / 24 * (24 - 19) * -1);
  }
  
  .item20 {
    animation-delay: calc(135s / 24 * (24 - 20) * -1);
  }
  
  .item21 {
    animation-delay: calc(135s / 24 * (24 - 21) * -1);
  }
  
  .item22 {
    animation-delay: calc(135s / 24 * (24 - 22) * -1);
  }
  
  .item23 {
    animation-delay: calc(135s / 24 * (24 - 23) * -1);
  }
  
  .item24 {
    animation-delay: calc(135s / 24 * (24 - 24) * -1);
  }
}

/* xl */
@media (min-width: 1280px) {
  .wrapper {
    height: 200px;
  }

  .itemForward img,
  .itemReverse img {
    width: 200px;
    height: 200px;
  }

  @keyframes scrollLeft {
    to {
      left: -250px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -250px;
    }
  }
  
  .itemForward,
  .itemReverse {
    border-radius: 6px;
    position: absolute;
    animation-duration: 135s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .itemForward {
    left: max(calc(250px * 24), 100%);
    animation-name: scrollLeft;
  }
  
  .itemReverse {
    right: max(calc(250px * 24), 100%);
    animation-name: scrollRight;
  }
  
  .item1 {
    animation-delay: calc(135s / 24 * (24 - 1) * -1);
  }
  
  .item2 {
    animation-delay: calc(135s / 24 * (24 - 2) * -1);
  }
  
  .item3 {
    animation-delay: calc(135s / 24 * (24 - 3) * -1);
  }
  
  .item4 {
    animation-delay: calc(135s / 24 * (24 - 4) * -1);
  }
  
  .item5 {
    animation-delay: calc(135s / 24 * (24 - 5) * -1);
  }
  
  .item6 {
    animation-delay: calc(135s / 24 * (24 - 6) * -1);
  }
  
  .item7 {
    animation-delay: calc(135s / 24 * (24 - 7) * -1);
  }
  
  .item8 {
    animation-delay: calc(135s / 24 * (24 - 8) * -1);
  }
  
  .item9 {
    animation-delay: calc(135s / 24 * (24 - 9) * -1);
  }
  
  .item10 {
    animation-delay: calc(135s / 24 * (24 - 10) * -1);
  }
  
  .item11 {
    animation-delay: calc(135s / 24 * (24 - 11) * -1);
  }
  
  .item12 {
    animation-delay: calc(135s / 24 * (24 - 12) * -1);
  }
  
  .item13 {
    animation-delay: calc(135s / 24 * (24 - 13) * -1);
  }
  
  .item14 {
    animation-delay: calc(135s / 24 * (24 - 14) * -1);
  }
  
  .item15 {
    animation-delay: calc(135s / 24 * (24 - 15) * -1);
  }
  
  .item16 {
    animation-delay: calc(135s / 24 * (24 - 16) * -1);
  }
  
  .item17 {
    animation-delay: calc(135s / 24 * (24 - 17) * -1);
  }
  
  .item18 {
    animation-delay: calc(135s / 24 * (24 - 18) * -1);
  }
  
  .item19 {
    animation-delay: calc(135s / 24 * (24 - 19) * -1);
  }
  
  .item20 {
    animation-delay: calc(135s / 24 * (24 - 20) * -1);
  }
  
  .item21 {
    animation-delay: calc(135s / 24 * (24 - 21) * -1);
  }
  
  .item22 {
    animation-delay: calc(135s / 24 * (24 - 22) * -1);
  }
  
  .item23 {
    animation-delay: calc(135s / 24 * (24 - 23) * -1);
  }
  
  .item24 {
    animation-delay: calc(135s / 24 * (24 - 24) * -1);
  }
}

/* xxl */
@media (min-width: 1536px) {
  .wrapper {
    height: 250px;
  }

  .itemForward img,
  .itemReverse img {
    width: 250px;
    height: 250px;
  }

  @keyframes scrollLeft {
    to {
      left: -300px;
    }
  }
  
  @keyframes scrollRight {
    to {
      right: -300px;
    }
  }
  
  .itemForward,
  .itemReverse {
    border-radius: 6px;
    position: absolute;
    animation-duration: 135s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .itemForward {
    left: max(calc(300px * 24), 100%);
    animation-name: scrollLeft;
  }
  
  .itemReverse {
    right: max(calc(300px * 24), 100%);
    animation-name: scrollRight;
  }
  
  .item1 {
    animation-delay: calc(135s / 24 * (24 - 1) * -1);
  }
  
  .item2 {
    animation-delay: calc(135s / 24 * (24 - 2) * -1);
  }
  
  .item3 {
    animation-delay: calc(135s / 24 * (24 - 3) * -1);
  }
  
  .item4 {
    animation-delay: calc(135s / 24 * (24 - 4) * -1);
  }
  
  .item5 {
    animation-delay: calc(135s / 24 * (24 - 5) * -1);
  }
  
  .item6 {
    animation-delay: calc(135s / 24 * (24 - 6) * -1);
  }
  
  .item7 {
    animation-delay: calc(135s / 24 * (24 - 7) * -1);
  }
  
  .item8 {
    animation-delay: calc(135s / 24 * (24 - 8) * -1);
  }
  
  .item9 {
    animation-delay: calc(135s / 24 * (24 - 9) * -1);
  }
  
  .item10 {
    animation-delay: calc(135s / 24 * (24 - 10) * -1);
  }
  
  .item11 {
    animation-delay: calc(135s / 24 * (24 - 11) * -1);
  }
  
  .item12 {
    animation-delay: calc(135s / 24 * (24 - 12) * -1);
  }
  
  .item13 {
    animation-delay: calc(135s / 24 * (24 - 13) * -1);
  }
  
  .item14 {
    animation-delay: calc(135s / 24 * (24 - 14) * -1);
  }
  
  .item15 {
    animation-delay: calc(135s / 24 * (24 - 15) * -1);
  }
  
  .item16 {
    animation-delay: calc(135s / 24 * (24 - 16) * -1);
  }
  
  .item17 {
    animation-delay: calc(135s / 24 * (24 - 17) * -1);
  }
  
  .item18 {
    animation-delay: calc(135s / 24 * (24 - 18) * -1);
  }
  
  .item19 {
    animation-delay: calc(135s / 24 * (24 - 19) * -1);
  }
  
  .item20 {
    animation-delay: calc(135s / 24 * (24 - 20) * -1);
  }
  
  .item21 {
    animation-delay: calc(135s / 24 * (24 - 21) * -1);
  }
  
  .item22 {
    animation-delay: calc(135s / 24 * (24 - 22) * -1);
  }
  
  .item23 {
    animation-delay: calc(135s / 24 * (24 - 23) * -1);
  }
  
  .item24 {
    animation-delay: calc(135s / 24 * (24 - 24) * -1);
  }
}