.carousel-badge {
  width: 100%;
  max-width: 100% !important;
  position: relative;
  overflow: hidden;
  margin-top: 0;
    -webkit-mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 15%,
        rgba(0,0,0,1) 85%,
        rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 15%,
        rgba(0,0,0,1) 85%,
        rgba(0,0,0,0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.carousel-badge__title {
  text-align: center;
  margin-bottom: 26px;
  color: #fff;
  font-size: 16px;
  line-height: 100%;
  font-weight: var(--weight-semibold);
}

.carousel-badge__track {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  /* MUST be max-content. Without a width the track is a block-level flex box at
   * 100% of .carousel-badge, and the badges (flex:0 0 auto) simply overflow it —
   * so translateX(-50%) meant "half the VISIBLE width", which has nothing to do
   * with the content and made the loop point land essentially at random.
   * max-content sizes the track to its badges, so -50% is exactly one set. */
  width: max-content;
  /* SPEED. The duration is the time for ONE full cycle = one pass of the badges.
   * It is not a rate, so the apparent speed is (one-set width / duration): adding
   * badges makes the strip scroll FASTER at the same duration, and a carousel with
   * 6 badges and one with 20 will not match. Raise the duration to slow it down. */
  animation: carousel-badge-scroll var(--carousel-badge-duration, 10s) linear infinite;
  will-change: transform;
}

/* Spacing MUST live on the item, not as `gap` on the track.
 *
 * The track holds two identical passes of N badges, and the animation moves it by
 * -50% of its own width. With `gap`, the track is 2N items + (2N-1) gaps — one gap
 * short of two full sets, because there is no gap after the last item. -50% then
 * lands half a gap early and the strip visibly jumps every time it loops.
 *
 * As a right margin, every item occupies item+margin, so the track is exactly
 * 2 x (N items + N margins) and -50% is exactly one set. Seamless.
 *
 * Keep --carousel-badge-gap on the item. Re-introducing `gap` on the track brings
 * the jump straight back. */
.carousel-badge__item {
  flex: 0 0 auto;
  margin-right: var(--carousel-badge-gap, 6rem);
}

.carousel-badge__img {
    max-height: 80px;
    width: auto;
    display: block;
}
.greyscale .carousel-badge__img {
    filter: brightness(0.5);
}
@keyframes carousel-badge-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover (script.js toggles animation-play-state; this is the CSS fallback). */
.carousel-badge:hover .carousel-badge__track {
  animation-play-state: paused;
}

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