/* ── Marquee (Partner & Media logo scroll) ── */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-container {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 25s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-reverse {
  animation-direction: reverse;
}

.marquee-item {
  flex-shrink: 0;
  padding: 0.75rem 2rem;
  transition: transform 0.2s;
}

.marquee-item:hover {
  transform: scale(1.08);
}

/* ── Media Coverage Fader ── */
.media-fader {
  position: relative;
  overflow: hidden;
  height: 60px; /* Reduced for mobile */
}

@media (min-width: 768px) {
  .media-fader {
    height: 160px; /* Increased for desktop/tablet */
  }
}

.media-fader__slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem; /* Reduced gap for mobile */
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media (min-width: 768px) {
  .media-fader__slide {
    gap: 3rem; /* Original gap for tablet and desktop */
  }
}

.media-fader__logo {
  flex-shrink: 1; /* Allow logos to shrink if needed */
  max-width: 25%; /* Ensure logos don't take too much width in a group of 3 */
  transition: transform 0.2s;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .media-fader__logo {
    max-width: 30%;
  }
}

.media-fader__logo img {
  max-width: 100%;
  height: auto;
}

.media-fader__logo:hover {
  transform: scale(1.1);
}