.logos-strip{
  --strip-bg: #f3f6fb;   
  --logo-h: 42px;        
  --gap: 56px;           
  --speed: 36s;          
  background: var(--strip-bg);
  padding: 22px 0;
  overflow: hidden;
}

.logos-strip .logos-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  animation: logos-marquee var(--speed) linear infinite;
  will-change: transform;
}


.logos-strip:hover .logos-track,
.logos-strip:focus-within .logos-track{
  animation-play-state: paused;
}

.logos-strip .logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}
.logos-strip .logo img{
  height: var(--logo-h);
  width: auto;
  max-width: 180px;
  filter: grayscale(1) contrast(1.05) brightness(.98);
}
.logos-strip .logo:hover img,
.logos-strip .logo:focus-visible img{
  filter: grayscale(0);
}
.logos-strip .logo:hover{ opacity: 1; transform: translateY(-2px); }

@keyframes logos-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } 
}


@media (max-width: 1199.98px){
  .logos-strip{ --logo-h: 36px; --gap: 44px; }
}
@media (max-width: 767.98px){
  .logos-strip{ --logo-h: 30px; --gap: 32px; --speed: 30s; }
}


@media (prefers-reduced-motion: reduce){
  .logos-strip .logos-track{ animation: none; }
}

.logos-strip{
  --logo-h: 64px;   
  --gap: 72px;      
}

.logos-strip .logo img{
  max-width: 240px; 
}


@media (min-width: 1440px){
  .logos-strip{ --logo-h: 72px; --gap: 84px; }
}


@media (max-width: 1199.98px){
  .logos-strip{ --logo-h: 52px; --gap: 56px; }
}


@media (max-width: 767.98px){
  .logos-strip{ --logo-h: 42px; --gap: 40px; }
}

.logos-strip .logos-track .logo:nth-child(3) img{
  height: calc(var(--logo-h) * 1.12);  
  max-width: 270px;                    
}


.logos-strip .logos-track .logo:nth-child(9) img{
  height: calc(var(--logo-h) * 1.12);
  max-width: 270px;
}