/* Лента логотипов клиентов — без подписи и заголовка: логотипы говорят сами.
   Стоит сразу перед блоком про Артема на том же темном фоне —
   читается как доказательство опыта, а не как отдельный блок.
   Логотипы одного цвета, без прозрачности. Дорожка дублируется скриптом. */

.wbr-clients{
  overflow:hidden;
  padding-block:44px 8px;
  background:var(--wbr-navy);
}
.wbr-clients__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.wbr-clients__lane{
  display:flex;
  width:max-content;
  animation:wbr-clients-run var(--wbr-clients-dur,70s) linear infinite;
}
.wbr-clients__lane:hover{ animation-play-state:paused; }
.wbr-clients__row{
  display:flex;
  align-items:center;
  gap:64px;
  padding-right:64px;
}
.wbr-clients__row img{
  flex:none;
  width:auto;
  height:44px;
  max-width:220px;
  object-fit:contain;
}
/* оптическое выравнивание: у этих логотипов начертание визуально крупнее */
.wbr-clients__row img.wbr-is-tall{ height:31px; }
.wbr-clients__row img.wbr-is-flat{ height:25px; }

@keyframes wbr-clients-run{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion:reduce){
  .wbr-clients__lane{ animation:none; }
}

@media (max-width:620px){
  .wbr-clients{ padding-block:32px 4px; }
  .wbr-clients__row{ gap:42px; padding-right:42px; }
  .wbr-clients__row img{ height:36px; }
  .wbr-clients__row img.wbr-is-tall{ height:26px; }
  .wbr-clients__row img.wbr-is-flat{ height:21px; }
}