/* Each identical group includes its trailing gap, so half the track is one
   complete period and the animation can restart without a visible seam. */
.ticker{
  --ticker-gap:calc(45 * var(--u));
  --ticker-icon-size:calc(30 * var(--u));
}
.ticker-track{
  flex-shrink:0;
  gap:0;
  transform:translate3d(0,0,0);
  animation:ticker-loop 84s linear infinite;
  will-change:transform;
}
.ticker-group{
  display:flex;
  flex:none;
  align-items:center;
  gap:var(--ticker-gap);
  padding-right:var(--ticker-gap);
}
.ticker-group>img{
  flex:none;
  width:var(--ticker-icon-size);
  height:var(--ticker-icon-size);
  object-fit:contain;
}
@keyframes ticker-loop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(max-width:850px){
  .ticker{--ticker-gap:25px;--ticker-icon-size:20px}
}
@media(max-width:600px){
  .ticker{--ticker-gap:23px;--ticker-icon-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none;transform:none;will-change:auto}
}