:root {
  --duration: 60s;
  --gap: 2rem;
  --color-bg-accent: #FFE018;
}

.marquee-slider {display:flex; flex-direction:column; gap:var(--gap); overflow:hidden;}
.marquee-row {display:flex; overflow:hidden; width:100%; user-select:none; gap:var(--gap);}
.marquee-group {display:flex; align-items:center; justify-content:space-around; gap:var(--gap); flex-shrink:0; min-width:100%; animation:scroll-x var(--duration) linear infinite;}
.marquee-row.reverse .marquee-group {animation-direction:reverse; animation-delay:-3s;}

@keyframes scroll-x {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

.logo-item {
  display:flex; align-items:center; justify-content:center;
  width:clamp(8rem, 5vw, 14rem); /* Responsive width like your example */
  aspect-ratio:19 / 9; /* Maintain consistent shape */
  border-radius:0.5rem; /* Optional */
}

.logo-item img {max-height:150px; display:block;}
.logo-item .logo-title { font-size:13px; margin-left:8px;}

/* Pause effect */
.marquee-group:hover { animation-play-state:paused;}