/* ZRM Image Marquee — horizontal scrolling image strip */

.zrm-image-marquee {
  overflow: hidden;
  position: relative;
  max-width: 100vw;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin: 0 -50vw;
  --zrm-imgmarquee-speed: 30s;
  --zrm-imgmarquee-height: 80px;
  --zrm-imgmarquee-gap: 48px;
  --zrm-imgmarquee-fit: contain;
}

.zrm-image-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: zrm-imgmarquee-scroll var(--zrm-imgmarquee-speed) linear infinite;
  will-change: transform;
}

.zrm-image-marquee--right .zrm-image-marquee__track {
  animation-direction: reverse;
}

.zrm-image-marquee__set {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--zrm-imgmarquee-gap);
  flex-shrink: 0;
  padding-right: var(--zrm-imgmarquee-gap);
}

@keyframes zrm-imgmarquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

.zrm-image-marquee__img {
  height: 100%;
  width: auto;
  object-fit: var(--zrm-imgmarquee-fit);
  display: block;
}

/* Grayscale variant */
.zrm-image-marquee--grayscale .zrm-image-marquee__img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s, opacity 0.3s;
}

.zrm-image-marquee--grayscale .zrm-image-marquee__item:hover .zrm-image-marquee__img {
  filter: grayscale(0);
  opacity: 1;
}

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