/* Marquee styles for 3:2 ratio, 30% width, 10% split padding */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100vw;
  gap: 0;
  position: relative;
  --img-width: 30vw;
  --img-padding: 5vw;
}
.marquee_img {
  flex: 0 0 var(--img-width);
  aspect-ratio: 3 / 2;
  width: var(--img-width);
  margin: 0 calc(var(--img-padding) / 2);
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: #eee;
  transition: filter 0.3s, z-index 0s;
  z-index: 0;
  position: relative;
}

.marquee_img.marquee_img--active {
  z-index: 10;
  box-shadow: none;
  filter: none;
  transform: none;
}

.marquee__track {
  display: flex;
  animation: marquee 20s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile: show roughly two images at once */
@media (max-width: 767px) {
  .marquee {
    --img-width: 48vw;
    --img-padding: 4vw;
  }
}