/* ============================================================
   LogoMarquee (.c-logo-marquee)
   Uses the .animate-marquee keyframe from base.css (translateX -50%
   over a duplicated track). Edge fade = CSS mask (source .mask-fade).
   ============================================================ */

.c-logo-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.c-logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation-duration: 35s; /* source used 35s (base class default is 40s) */
}

/* same seamless loop played backwards — logos travel left → right */
.c-logo-marquee__track--reverse { animation-direction: reverse; }

.c-logo-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 24px;
  /* gap-20 as margin (not flex gap) so the -50% loop point stays seamless */
  margin-right: 80px;
}
.c-logo-marquee__item img {
  height: 100%;
  width: auto;
  object-fit: contain;
}