.marquee-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
  display: flex;
}
.marquee-wrapper::before, .marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.marquee-wrapper::before {
  left: 0;
}
.marquee-wrapper::after {
  right: 0;
  transform: rotate(180deg);
}
@media (max-width: 991px) {
  .marquee-wrapper {
    max-width: none;
  }
}
.marquee-wrapper .marquee-track {
  display: flex;
  align-items: center;
  gap: 81.3px;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
@media (max-width: 991px) {
  .marquee-wrapper .marquee-track {
    gap: 40px;
  }
}
@media (min-width: 992px) {
  .marquee-wrapper .marquee-track:hover {
    animation-play-state: paused;
  }
}
.marquee-wrapper .marquee-item {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.marquee-wrapper .marquee-item img {
  max-height: 112px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 992px) {
  .marquee-wrapper .marquee-item img {
    transition: transform 0.3s ease;
  }
  .marquee-wrapper .marquee-item img:hover {
    cursor: pointer;
    filter: opacity(1);
    transform: scale(1.05);
  }
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}