.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.carousel ul {
  --item-width: 320px;
  --speed: 50px; /* pixels per second */
  --total-width: calc(var(--item-width) * var(--item-count));
  --duration: calc(var(--total-width) / var(--speed));
  list-style: none;
  padding: 0;
  position: relative;
  display: flex;
  gap: 10px;
  animation: scroll calc(var(--duration) * 1s) linear infinite;
  width: var(--total-width);
}
.carousel ul li {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #07046B;
  box-shadow: 0 12px 48.1px 0 rgba(0, 0, 0, 0.2);
  background-repeat: no-repeat;
  background-size: 95px;
  background-position: 93% center;
  color: #FFF;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Chakra Petch";
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 30px */
  height: 109px;
  width: var(--item-width);
  display: flex;
  align-items: center;
  padding: 12px 20px;
  flex-shrink: 0;
}
.carousel ul li:after {
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 109px;
  width: 320px;
  top: 0;
  left: 0;
  border-radius: 20px;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to right, #07046B 55%, transparent 123%);
}
.carousel ul li span {
  background: linear-gradient(to right, #ef330e, white);
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  z-index: 5;
}

.carousel ul li.new-games-weekly {
  background-image: url(../images/carousel/icon-new-games-weekly.webp?v=1);
}
.carousel ul li.fast-redemption {
  background-image: url(../images/carousel/icon-fast-redemption.webp?v=1);
}
.carousel ul li.sport-predictions {
  background-image: url(../images/carousel/icon-sport-predictions.webp?v=1);
}
.carousel ul li.safe-secure {
  background-image: url(../images/carousel/icon-safe-secure.webp?v=1);
}
.carousel ul li.vip-league {
  background-image: url(../images/carousel/icon-vip-league.webp?v=1);
}
.carousel ul li.support-247 {
  background-image: url(../images/carousel/icon-247-support.webp?v=1);
}
.carousel ul li.respsonsible-gaming {
  background-image: url(../images/carousel/icon-responsible-gaming.webp?v=1);
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--total-width) / -2));
  }
}

@media (min-width: 2000px) {
  .carousel {
    transform: scale(1.5);
  }
}
@media (min-width: 3000px) {
  .carousel {
    transform: scale(2);
  }
}