/* GJC Frame Marquee — scrolling film-strip of project frames. */
.gjc-frame-marquee {
  --gjc-marquee-duration: 36s;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--e-global-color-primary, #050505) 6%, var(--e-global-color-primary, #050505) 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--e-global-color-primary, #050505) 6%, var(--e-global-color-primary, #050505) 94%, transparent);
}
.gjc-frame-marquee__track {
  display: flex;
  width: max-content;
  animation: gjc-frame-marquee-scroll var(--gjc-marquee-duration) linear infinite;
}
.gjc-frame-marquee__group {
  display: flex;
  gap: 1rem;
  padding-inline: 0.5rem;
  flex: 0 0 auto;
}
.gjc-frame-marquee__item {
  margin: 0;
  width: 20rem;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--e-global-color-primary, #050505) 6%, transparent);
}
.gjc-frame-marquee__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes gjc-frame-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .gjc-frame-marquee__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
  }
  .gjc-frame-marquee__group {
    flex-wrap: wrap;
    justify-content: center;
  }
}