.image-marquee {
  --image-height: 60px;
  --image-gap: 32px;
  --marquee-duration: 35s;
  --marquee-fade-color: #f5f8ff;
  overflow: hidden;
  position: relative;
}

.image-marquee::before,
.image-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}

.image-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--marquee-fade-color) 0%, transparent 100%);
}

.image-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--marquee-fade-color) 0%, transparent 100%);
}

.image-marquee__track {
  display: flex;
  width: max-content;
  animation: image-marquee-scroll var(--marquee-duration) linear infinite;
}

.image-marquee__group {
  display: flex;
  gap: var(--image-gap);
  margin-right: var(--image-gap);
  align-items: center;
  padding: 0.5rem 0;
}

.image-marquee__item {
  display: flex;
  align-items: center;
  height: var(--image-height);
}

.image-marquee__image {
  height: 100%;
  width: auto;
  object-fit: contain;
}

@keyframes image-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-marquee__track {
    animation: none;
  }
}