/*
 * Кит секции логотипов: набор A эталона, четыре раскладки (две оси по два значения).
 *
 * ИСТОЧНИК ЧИСЕЛ - ЖИВОЙ ЗАМЕР, А НЕ ПАКЕТ ДИЗАЙНА: `docs/konkurent/showcase-zamer.md`,
 * раздел «Набор 1». Пакета у этой секции нет, и это объявлено в шапке `inc/site-logos.php`.
 *
 * ШКАЛА СОШЛАСЬ БЕЗ ПЕРЕСЧЁТА, И ЭТО ЗАМЕР. Контейнер эталона `--section-max-width` = 1536,
 * поля 24 по бокам и 96 сверху; у нас `--ls-max` = 1536, `--ls-pad-cosy` = 96, поле 24 - то же
 * самое значение в значение. Поэтому числа ряда переносятся как есть, без приведения к нашей
 * бумаге.
 *
 * ОСЬ `Logo size: Medium` ЗАМЕРЕНА НА ВСЕХ ТРЁХ ШИРИНАХ 25.09.2026 (режим просмотра эталона):
 * 4 колонки на широкой и на планшете, 2 на телефоне. Высоты клеток на узких ветках у нас НИЖЕ
 * эталона - решение владельца, объявлено у самих чисел.
 *
 * Узость решает контейнерный запрос по ширине БУМАГИ - те же два порога, что у соседей.
 */

/*
 * КОНТЕЙНЕР ОБЪЯВЛЯЕТСЯ ЗДЕСЬ, А НЕ БЕРЁТСЯ У СОСЕДА.
 *
 * Двенадцать правил ниже написаны запросом `@container ls (...)`, а объявления самого
 * контейнера в этом файле не было ни одного: он приезжал из `hero.css`, `stats.css`,
 * `testimonials.css` и `offer.css` - все четыре объявляют на `.ls-w` одно и то же. Пока
 * цепочка стилей их несёт, работает; уйди любой - все узкие ветки логотипов умрут МОЛЧА,
 * без ошибки и без следа, а мёртвый контейнерный запрос выглядит исполненным правилом.
 *
 * Повтор объявления безопасен: значение то же самое, и побеждает оно само себя.
 */
.ls-w{container-type:inline-size;container-name:ls}

.ls-logos-sec{
  /* Замерено: поля 96 сверху и снизу, 24 по бокам. */
  --ls-lg-pad:var(--ls-pad-cosy,96px);
  --ls-lg-pin:24px;
  /* Замерено: зазор между шапкой и рядом 72. */
  --ls-lg-gap:72px;
  /*
   * Замерено: 8 колонок, зазор 18, карточка 170x150 при Logo size = Small.
   *
   * ЧИСЛО КОЛОНОК ЗДЕСЬ - СЛЕДСТВИЕ, А ХОЗЯИН - ШИРИНА КЛЕТКИ, И ЭТО ПОЧИНКА ПО ЗАМЕРУ.
   * Восемь колонок эталон рисует на контейнере 1536; наша бумага 1120 даёт контейнер 1057,
   * и те же восемь колонок сжимали клетку до 116 вместо 170 - замерено в браузере, логотип
   * в такой клетке нечитаем. Это записанное правило проекта: постоянное число из макета
   * живёт ровно на той ширине, где его замерили.
   *
   * Поэтому широкая ветка объявляет МИНИМАЛЬНУЮ клетку (замеренные 170), а число колонок
   * считает браузер: на 1536 выходит ровно 8 по 170.25 - число эталона сходится само.
   */
  --ls-lg-cell-min:170px;
  --ls-lg-cell-gap:18px;
  --ls-lg-cell-h:150px;
  /* Замерено: заголовок и абзац по 576 при делении надвое. */
  --ls-lg-col:576px;

  box-sizing:border-box;
  padding-block:var(--ls-lg-pad);
  background:var(--ls-paper,#fff);
  color:var(--ls-ink,#000);
  font-family:var(--ls-text-face,system-ui);
  font-size:var(--ls-body,20px);
  line-height:1.4;
}

/*
 * БОКОВОЕ ПОЛЕ ЛЕЖИТ ВНУТРИ КОНТЕЙНЕРА, А НЕ СНАРУЖИ, И ЭТО ЗАМЕР, А НЕ ВКУС.
 *
 * У эталона: секция 1655, контейнер 1536, ряд 1488 - то есть 24 по бокам отнимаются ОТ
 * контейнера. Первая редакция ставила поле на саму секцию, контейнер оставался 1536, и ряд
 * выходил 1536 вместо 1488: восемь колонок давали клетку 241 вместо 170.25. Числа сошлись
 * ровно после переноса поля внутрь - замерено на 1600, где контейнер равен эталонному.
 */
.ls-logos-sec__in{
  inline-size:100%;
  max-inline-size:var(--ls-lg-max,var(--ls-max,1536px));
  margin-inline:auto;
  padding-inline:var(--ls-lg-pin);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--ls-lg-gap);
}

/* --- Шапка --- */

.ls-logos__head{display:grid;gap:24px}

/*
 * НАДНАДПИСЬ НЕСЁТ ЧЕРТУ ПСЕВДОЭЛЕМЕНТОМ. Замерено у эталона: надпись 80x18, рядом линия 50x1.
 * Отдельным узлом линия стала бы лишним листом дерева - его пришлось бы гасить в скелетоне
 * вставки и объяснять диктору.
 */
.ls-logos__eb{
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:var(--ls-eb,12.8px);
  line-height:1.4;
  font-weight:500;
  letter-spacing:.025em;
  color:var(--ls-muted,#666);
}

.ls-logos__eb::after{
  content:"";
  inline-size:50px;
  block-size:1px;
  background:currentColor;
  opacity:.45;
  flex:none;
}

/*
 * ЛЕСТНИЦА КЕГЛЯ ЗАГОЛОВКА - СВОЯ, И ДО 15.09.2026 ЕЁ НЕ БЫЛО ВОВСЕ.
 *
 * Общая узкая ветка сайта опускает `--ls-h2` до 26 на корне `.ls-sec`, а корень этой секции
 * зовётся `.ls-logos-sec` и общего класса не несёт - значит правило до неё не доезжает.
 * Замерено на телефоне: заголовок логотипов 61.04px против 26px у соседней галереи, то есть
 * он вдвое крупнее при том же экране. Владелец назвал это прямо: «крошечные логотипы, при этом
 * заголовки просто огромные».
 *
 * Лестница взята у соседей, а не придумана: `stats.css` опускает 48.83 -> 39.06 на среднем
 * пороге, `offer.css` - до 26 на узком. Те же два числа и здесь; свой третий вариант означал
 * бы три разных заголовка на одной странице сайта.
 */
@container ls (max-width:1040px){.ls-logos-sec{--ls-h2:39.06px}}
@container ls (max-width:700px){.ls-logos-sec{--ls-h2:26px}}

.ls-logos__h{
  margin:0;
  font-family:var(--ls-head-face,var(--ls-text-face,system-ui));
  font-size:var(--ls-h2,48.83px);
  line-height:1.1;
  font-weight:500;
  max-inline-size:var(--ls-lg-col);
}

.ls-logos__p{
  margin:0;
  max-inline-size:var(--ls-lg-col);
  color:var(--ls-muted,#666);
}

/*
 * ОСЬ `Content alignment`. Замерено у эталона при `Split`: строка
 * `flex flex-col gap-6 items-start @desktop:flex-row` - заголовок слева, абзац справа, оба по 576.
 * Обе оси рисует ОДНА разметка; разводит их этот класс.
 */
.ls-logos-sec--split .ls-logos__head{
  grid-template-columns:1fr 1fr;
  grid-template-areas:"eb eb" "title lead";
  gap:24px 48px;
  align-items:start;
}

.ls-logos-sec--split .ls-logos__eb{grid-area:eb}
.ls-logos-sec--split .ls-logos__title{grid-area:title}
.ls-logos-sec--split .ls-logos__lead{grid-area:lead}

.ls-logos-sec--center .ls-logos__head{justify-items:center;text-align:center}
.ls-logos-sec--center .ls-logos__eb{justify-content:center}
.ls-logos-sec--center .ls-logos__h,
.ls-logos-sec--center .ls-logos__p{margin-inline:auto}

/* --- Ряд логотипов --- */

/*
 * ПУСТЫХ МЕСТ ЗДЕСЬ НЕ БУДЕТ, И ЭТО ОБЪЯВЛЕННОЕ ОТСТУПЛЕНИЕ ОТ ЭТАЛОНА.
 *
 * Замерено у него: ряд объявляет восемь колонок, логотипов шесть, и справа остаётся 377 точек -
 * ровно две колонки плюс зазор. На планшете во втором ряду пустуют две клетки. Это тот самый
 * разрыв «число мест решает раскладка, число пунктов - данные», записанный в правилах проекта.
 *
 * Мы его НЕ повторяем: правило владельца сильнее правила эталона - пустых мест под текст,
 * картинки и видео быть не должно. `auto-fit` схлопывает незанятые треки, и шесть логотипов
 * занимают всю ширину ряда. Цена названа: клетка при шести логотипах выходит 233 вместо
 * эталонных 170.25, то есть на широкой бумаге логотип КРУПНЕЕ, чем у образца.
 *
 * Хочешь буквальную копию с пустотой - это `auto-fill` вместо `auto-fit`, одно слово; но тогда
 * секция вернёт ровно тот дефект, на который владелец показывал четыре раза подряд.
 */
.ls-logos__row{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  /*
   * ШИРОКАЯ ВЕТКА СЧИТАЕТ КОЛОНКИ САМА, УЗКИЕ НАЗЫВАЮТ ИХ ЧИСЛОМ. У узких ширин число
   * колонок замерено прямо (4 и 2), и вычислять его нечем: на 751 эталон рисует четыре по
   * 164.77, то есть клетку УЖЕ минимальной - правило `auto-fit` дало бы там три.
   */
  grid-template-columns:repeat(auto-fit,minmax(var(--ls-lg-cell-min),1fr));
  gap:var(--ls-lg-cell-gap);
}

.ls-logos__cell{
  display:flex;
  align-items:center;
  justify-content:center;
  block-size:var(--ls-lg-cell-h);
  padding:24px;
  box-sizing:border-box;
  border-radius:var(--ls-radius,0px);
}

.ls-logos__cell img{max-inline-size:100%;max-block-size:100%;object-fit:contain}

/*
 * ОСЬ `Logo size`. Замерено: `Small -> Medium` убирает `@desktop:grid-cols-8`, колонок
 * становится ЧЕТЫРЕ по 358.5, карточка растёт со 170x150 до 359x264, секция с 666 до 1182.
 */
.ls-logos-sec[data-size="md"]{
  /* Замерено: 4 колонки по 358.5, карточка 359x264. Хозяин тот же - ширина клетки. */
  --ls-lg-cell-min:358.5px;
  --ls-lg-cell-h:264px;
}

.ls-logos__more{
  margin:0;
  font-size:var(--ls-sm,14px);
  color:var(--ls-muted,#666);
}

/* --- Планшетная ширина бумаги --- */

@container ls (max-width:1040px){
  .ls-logos-sec{
    --ls-lg-pad:72px;
    --ls-lg-gap:48px;
    /* Замерено: 4 колонки по 164.77, зазор 14.65, карточка 165x122. */
    --ls-lg-cell-gap:14.65px;
    --ls-lg-cell-h:122px;
  }

  /* Клетка здесь УЖЕ минимальной широкой ветки, поэтому число колонок называется прямо. */
  .ls-logos__row{grid-template-columns:repeat(4,minmax(0,1fr))}

  /*
   * MEDIUM НА ПЛАНШЕТЕ - ЧЕТЫРЕ КОЛОНКИ, КАК У `Small`, И ЭТО ЗАМЕР 25.09.2026: у эталона класс
   * ряда при `Medium` - `grid-cols-2 @tablet:grid-cols-4`, клетки 164.77 при зазоре 14.65.
   * Прежние три колонки были выведены по лестнице соседей и разошлись с эталоном.
   *
   * ВЫСОТА НИЖЕ ЭТАЛОНА НАМЕРЕННО - РЕШЕНИЕ ВЛАДЕЛЬЦА (15.09.2026, подтверждено 25.09.2026). У
   * эталона клетка 215 при поле 39, и широкий знак в ней выходит мелким; владелец назвал это
   * «крошечный». Число - 0.74 от ширины клетки широкой ветки (359 при кадре 264), то есть 132.
   */
  .ls-logos-sec[data-size="md"]{--ls-lg-cell-h:132px}

  /*
   * ДЕЛЕНИЕ НАДВОЕ СНИМАЕТСЯ ВМЕСТЕ С МЕСТОМ ПОД НЕГО. Замерено у эталона: строка деления
   * объявлена `@desktop:flex-row`, то есть ниже широкого порога заголовок и абзац идут столбцом.
   */
  .ls-logos-sec--split .ls-logos__head{
    grid-template-columns:1fr;
    grid-template-areas:"eb" "title" "lead";
    gap:24px;
  }
}

/* --- Узкая ширина бумаги --- */

@container ls (max-width:700px){
  .ls-logos-sec{
    --ls-lg-pad:56px;
    --ls-lg-pin:20px;
    --ls-lg-gap:40px;
    /* Замерено: 2 колонки по 185.2, зазор 12.56, карточка 185x105. Пустых мест ноль. */
    --ls-lg-cell-gap:12.56px;
    --ls-lg-cell-h:105px;
  }

  .ls-logos__row{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Замерено 25.09.2026: у эталона 2 колонки по 185.2, клетка 184 при поле 33. Высота у нас
     ниже по решению владельца (см. планшетную ветку): 0.74 от клетки 161, то есть 119. */
  .ls-logos-sec[data-size="md"]{--ls-lg-cell-h:119px}

  .ls-logos__cell{padding:16px}
}

/* --- Семья B: бенто --- */

/*
 * ЧИСЛА СОШЛИСЬ БЕЗ ПОДГОНКИ, И ЭТО ПРОВЕРКА ПЕРЕНОСА, А НЕ СОВПАДЕНИЕ. Замерено у эталона:
 * четыре ячейки по 354 при зазоре 24. Четырежды 354 плюс трижды 24 = 1488 - ровно ширина
 * нашего ряда на контейнере 1536. То есть бенто рисуется на той же сетке, что и семья A.
 *
 * ВЫСОТА ПЛИТКИ ЗАДАЁТСЯ ЕЙ САМОЙ, А НЕ СТРОКОЙ СЕТКИ. У эталона строки объявлены
 * `auto-rows-auto`, и высоты идут парами: 220/464 на широкой, 107/254 на планшете, 92/221 на
 * телефоне (замерено). Через `span` они не выражаются - 107 на 2 плюс зазор дают 233.5, а не
 * 254, - поэтому число ставится плитке прямо.
 */
.ls-logos-sec--bento{
  --ls-lg-pad:120px;
  --ls-lg-gap:96px;
  --ls-lg-cell-gap:24px;
  /*
   * НА ШИРОКОЙ ВЕТКЕ ВСЕ ЧЕТЫРЕ ЯЧЕЙКИ ОДНОЙ ВЫСОТЫ, И ЭТО ЗАМЕР, А НЕ УПРОЩЕНИЕ.
   *
   * Таблица замера говорит про десктоп дословно: «ячеек 4, размеры 354x464 все четыре, зазор
   * 24». Пары 220/464 в замере нет ни разу - её вывел я, перенеся сюда ПЛАНШЕТНЫЙ узор
   * (107/254) и достроив его до широкой. Наружу это вышло тем, что владелец назвал
   * несовпадением: на экране стояли шесть плиток разной высоты там, где у эталона ровный ряд
   * из четырёх.
   */
  --ls-lg-tile:464px;
  --ls-lg-tile-big:464px;
  --ls-lg-cols:4;
}

/*
 * ЧЕТЫРЕ ЯЧЕЙКИ НА ШЕСТЬ ЛОГОТИПОВ - ТОЖЕ ЗАМЕР. «У ШИРОКОЙ ВЕТКИ ЧЕТЫРЕ ЯЧЕЙКИ НА ШЕСТЬ
 * ЛОГОТИПОВ»: два последних пункта на десктопе не показываются вовсе, их показывает узкая
 * ветка. Хозяин возврата поэтому есть, и гашение не теряет данных - ровно как у эталона, где
 * лишнее в широком дереве снято `display:none`.
 */
.ls-logos-sec--bento .ls-logos__tile:nth-child(n+5){display:none}

/* Шапка бенто сложена столбцом, и абзац стоит ПОД заголовком - замерено (`flex flex-col
   gap-2`), в отличие от семьи A, где при `split` они идут рядом. Абзац шире: `max-w-2xl` 672
   против 576. */
.ls-logos-sec--bento .ls-logos__head{gap:8px;justify-items:start;text-align:start}
.ls-logos-sec--bento .ls-logos__p{max-inline-size:672px}

.ls-logos__bento{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(var(--ls-lg-cols),minmax(0,1fr));
  grid-auto-rows:auto;
  gap:var(--ls-lg-cell-gap);
}

.ls-logos__tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  block-size:var(--ls-lg-tile);
  padding:24px;
  box-sizing:border-box;
  border-radius:var(--ls-radius,0px);
}

/*
 * КРУПНАЯ ПЛИТКА ОТЛИЧАЕТСЯ РАМКОЙ И РАСКЛАДКОЙ ВНУТРИ. Замерено у эталона:
 * `flex flex-col justify-between gap-16 border p-6` - кадр сверху, слова снизу, между ними
 * распор. У малой рамки нет вовсе (`flex flex-1 items-center justify-center p-6`).
 */
.ls-logos__tile[data-big]{
  block-size:var(--ls-lg-tile-big);
  justify-content:space-between;
  align-items:stretch;
  border:1px solid var(--ls-line,currentColor);
  gap:96px;
}

/*
 * КАДР БЕНТО - ГРИД, А НЕ FLEX, И ЭТО ПОЧИНКА ПО ЖИВОМУ ЗАМЕРУ.
 *
 * Замерено на холсте: картинка выходила 5x3 ТОЧКИ при плитке 479x107 - шесть логотипов бенто
 * не показывались вовсе, на экране стояли только надписи «Text here...».
 *
 * Причина - записанный класс «процент у `block-size` разрешается против высоты, а высоты нет».
 * Печатник кадра (`sc_site_v2_photo()`) одевает своё гнездо `block-size:100%`, и у семьи A это
 * работает, потому что клетка несёт `block-size:var(--ls-lg-cell-h)` - высота определённая.
 * Здесь же кадр был `flex:1` с `min-block-size:0`, то есть высота ГИБКАЯ: сто процентов от неё
 * разрешаются в «нет высоты», гнездо схлопывается, а вместе с ним и картинка.
 *
 * Грид растягивает единственную ячейку на всю коробку, поэтому `100%` получает, против чего
 * считаться. `min-*:0` у потомка обязателен: иначе элемент грида распирает трек до min-content
 * своего содержимого - ещё одна записанная грабля этого проекта.
 */
.ls-logos__frame{display:grid;place-items:center;min-block-size:0;flex:1;inline-size:100%;align-self:stretch}
.ls-logos__frame > *{min-inline-size:0;min-block-size:0;inline-size:100%;block-size:100%}
.ls-logos__frame img{max-inline-size:100%;max-block-size:100%;object-fit:contain}
.ls-logos__tile[data-big] .ls-logos__frame{flex:none;block-size:auto;align-self:start}

.ls-logos__words{display:flex;flex-direction:column;gap:8px}
.ls-logos__tt{margin:0;font-weight:500}
.ls-logos__tp{margin:0;font-size:var(--ls-sm,14px);color:var(--ls-muted,#666)}

@container ls (max-width:1040px){
  .ls-logos-sec--bento{
    --ls-lg-pad:96px;
    --ls-lg-gap:72px;
    /* Замерено: 2 колонки, ячейки 342, зазор 19.53, высоты 107 и 254. */
    --ls-lg-cols:2;
    --ls-lg-cell-gap:19.53px;
    --ls-lg-tile:107px;
    --ls-lg-tile-big:254px;
  }

  .ls-logos-sec--bento .ls-logos__tile{padding:16px;gap:16px}
  .ls-logos-sec--bento .ls-logos__tile[data-big]{gap:24px}
  /* Узкая ветка показывает ВСЕ шесть - это она и есть хозяин возврата для широкой. */
  .ls-logos-sec--bento .ls-logos__tile:nth-child(n+5){display:flex}
}

@container ls (max-width:700px){
  .ls-logos-sec--bento{
    --ls-lg-pad:72px;
    --ls-lg-gap:56px;
    /* Замерено: одна колонка, ячейки 383, зазор 16.75, высоты 92 и 221. */
    --ls-lg-cols:1;
    --ls-lg-cell-gap:16.75px;
    --ls-lg-tile:92px;
    --ls-lg-tile-big:221px;
  }

  /*
   * В ОДНУ КОЛОНКУ РАМКА СТОИТ У ВСЕХ ПЛИТОК - ОТСТУПЛЕНИЕ ОТ ЭТАЛОНА, НАЗВАННОЕ ВЛАДЕЛЬЦЕМ.
   *
   * У эталона рамку несёт только КРУПНАЯ плитка, а малая стоит голой: на широкой ширине они
   * лежат рядом в разных колонках, и разница читается как замысел - «одна плитка главная».
   * Стоит колонке стать одной, плитки выстраиваются столбцом, и та же разница читается как
   * сбой вёрстки: замечание владельца 15.09.2026 дословно - «почему одни логотипы у тебя в
   * рамке, а другие не в рамке? это какая-то ерунда... неравномерные отступы по бокам».
   *
   * Отступы при этом были одинаковые - неравномерной выглядела именно рамка: она забирает
   * свою толщину и поле, а соседняя плитка стоит без них.
   *
   * Выбрана рамка У ВСЕХ, а не ни у кого: без неё столбец из шести знаков теряет границы
   * плиток вовсе и читается как один список без ритма.
   */
  .ls-logos-sec--bento .ls-logos__tile{
    border:1px solid var(--ls-line,currentColor);
  }
}

/* --- Семья C: бегущая лента --- */

/*
 * Замерено у эталона: секция 1655x292, контейнер `flex flex-col gap-6 py-8 @tablet:gap-8
 * @tablet:py-10`, маска градиентом по краям, у логотипов фильтр, картинок ДВЕНАДЦАТЬ на шесть
 * логотипов - то есть полоса продублирована ради бесшовности.
 *
 * ЛЕНТА НЕ ДВИЖЕТСЯ, И ЭТО ЗАМЕР, А НЕ РЕШЕНИЕ.
 *
 * Первая редакция этого файла писала здесь обратное - «движение наше решение, замер анимацию не
 * снимал». Неправда: разведка её снимала, и раздел про набор 3 говорит прямо -
 * `getAnimations({subtree:true})` отдаёт НОЛЬ при пяти живых анимациях на остальной странице,
 * `prefers-reduced-motion` выключен, вкладка видима, замер сделан В ПРОСМОТРЕ
 * (`docs/konkurent/showcase-zamer.md`). Я верстал по своей половине замера, не прочитав чужую.
 *
 * Дубль без движения не бессмыслен, и замер объясняет зачем: двенадцать плиток на шесть
 * логотипов, дорожка 2898 при ленте 1647, переполнение 1251 уходит в обе стороны ПОРОВНУ -
 * видно семь плиток из двенадцати, а маска растворяет края, и обрезанные читаются как
 * продолжение. Бесконечность имитируется дублем и маской, а не ходом.
 *
 * Цена решения названа там же: пять кадров из двенадцати не видны никогда и грузятся впустую.
 * Это свойство эталона, и мы повторяем его вместе с остальным.
 */
.ls-logos-sec--strip{
  --ls-lg-pad:60px;
  --ls-lg-gap:48px;
  /* Замерено у эталона на десктопе: плитка 192x96, кадр 144x48, разделитель 54x6. */
  --ls-lg-cell-min:192px;
  --ls-lg-cell-h:96px;
  --ls-lg-shot:144px;
  --ls-lg-shot-h:48px;
  --ls-lg-sep:54px;
}

/*
 * ЗАГОЛОВОК ЛЕНТЫ - ПОДПИСЬ ПО ЦЕНТРУ, А НЕ ЗАГОЛОВОК СЕКЦИИ.
 *
 * Замерено у эталона: контейнер шапки `flex w-full flex-col gap-4 items-center` высотой 28
 * несёт ОДИН `<p>` кеглем 20 и весом 600 по центру; наднадписи и абзаца у этого набора нет
 * вовсе. У нас те же данные давали `h2` кеглем `--ls-h2` (61.04px) и прижатый к началу - то
 * есть набор выглядел как обычная секция с огромным заголовком над лентой.
 *
 * ТЕГ ОСТАЁТСЯ `h2`, И ЭТО ОБЪЯВЛЕННОЕ ОТСТУПЛЕНИЕ. У эталона тут абзац, то есть секция вовсе
 * без заголовка; повторить это значило бы отнять у диктора уровень и сломать лестницу
 * заголовков страницы, которую сторожит `render-test.php`. Вид при этом эталонный: кегль,
 * вес и выключка совпадают, а разница видна только дереву доступности.
 */
.ls-logos-sec--strip .ls-logos__head{justify-items:center;text-align:center;gap:16px}

/*
 * ВЫКЛЮЧКА ЗАГОЛОВКА ЛЕНТЫ - ЕДИНСТВЕННАЯ ОСЬ ЭТОГО НАБОРА У ЭТАЛОНА.
 *
 * Снято живьём: вкладка `Customize` ленты несёт один орган - `Heading alignment` выпадающим
 * списком со значениями `Center` и `Left`, умолчание `Center`. Признак печатает рендерер и
 * только у ленты: у остальных наборов эту переменную никто не читает.
 */
.ls-logos-sec--strip[data-halign="left"] .ls-logos__head{justify-items:start;text-align:start}

.ls-logos-sec--strip .ls-logos__title :is(h1,h2,h3,h4,p){
  font-size:20px;
  font-weight:600;
  line-height:1.4;
}

/*
 * МАСКА СИММЕТРИЧНА, И ПОТОМУ ГОРИЗОНТАЛЬНЫЙ ГРАДИЕНТ ЗДЕСЬ ЗАКОНЕН.
 * rtl-ok: оба края гаснут одинаково, зеркалирование не меняет картинку ни на точку.
 */
.ls-logos__marq{
  position:relative;
  overflow:hidden;
  /*
   * ЛЕНТА ИДЁТ КРАЙ В КРАЙ СЕКЦИИ, А НЕ ПО КОНТЕЙНЕРУ, И ЭТО ЗАМЕР. У эталона она 1647 при
   * контейнере 1536 - то есть боковые поля на неё не действуют вовсе. У нас она жила внутри
   * контейнера и выходила 1488: маска гасила края на 48 точек раньше, и обрезанные плитки
   * читались обрубком там, где у эталона они уходят за край экрана.
   *
   * Поле снимается ОТРИЦАТЕЛЬНЫМ отступом, а не переносом узла наружу: узел стоит внутри
   * колонки контейнера, и вынь мы его - зазор между шапкой и лентой пришлось бы объявлять
   * второй раз. Отступ логический, в RTL зеркалится сам.
   */
  margin-inline:calc(-1 * var(--ls-lg-pin));
  /* rtl-ok: маска симметрична - оба края гаснут одинаково, зеркалирование не меняет её ни на точку. */
  mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  /* rtl-ok: то же правило для webkit, маска та же и так же симметрична. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
}

/*
 * ДВА НАБОРА КАДРОВ, А НЕ ЗНАК ИНЛАЙНОВОЙ ОСИ ВНУТРИ ОДНОГО, И ЭТО ПРИЁМ СОСЕДА.
 *
 * Логического `translate` в CSS нет: сдвиг всегда физический. Галерея решает это ровно так же
 * - своя пара кадров и переключение по `:dir(rtl)`, - и повторять её решение вторым способом
 * значило бы завести две механики у одного вопроса. Сдвиг на ПОЛОВИНУ: дорожка продублирована,
 * и в конце круга на месте первой полосы стоит вторая - шва не видно.
 *
 * isolation: перенос через `--sc-dir` линтер RTL не признаёт у `translate3d` (его исключение
 * написано под `translateX`), и обходить линтер вместо того, чтобы взять готовое решение
 * соседа, было бы худшим из двух.
 */
@keyframes ls-logos-run{
  from{translate:0 0}
  to{translate:-50% 0}
}

@keyframes ls-logos-run-rtl{
  from{translate:0 0}
  to{translate:50% 0}
}

:dir(rtl) .ls-logos__track{animation-name:ls-logos-run-rtl}

.ls-logos__track{
  display:flex;
  inline-size:max-content;
  /*
   * ЛЕНТА ЕДЕТ, И ДО 15.09.2026 ОНА НЕ ЕХАЛА ВОВСЕ.
   *
   * Дорожка печаталась ДВАЖДЫ - ровно ради бесшовного хода, - а самого хода не было ни строки:
   * замерено в браузере, `animation-name: none`, живых анимаций ноль. То есть человек видел
   * две одинаковые половины подряд и не понимал, что происходит; владелец спросил дословно:
   * «это должно работать как карусель? сейчас у меня нет понимания, что должно происходить».
   *
   * Постоянна СКОРОСТЬ, а не время: число знаков у дел разное, и при постоянной длительности
   * лента из двенадцати ехала бы вдвое быстрее ленты из шести. Длительность поэтому считает
   * ПЕЧАТНИК (три секунды на знак) и кладёт её сюда переменной - в CSS числа плиток не знает
   * никто. Запас 40s работает там, где печатник до узла не дошёл: лента поедет, а не встанет.
   *
   * В иврите лента едет в другую сторону - своим набором кадров, см. выше.
   */
  animation:ls-logos-run var(--ls-lg-run,40s) linear infinite;
  /*
   * ДОРОЖКА ОТЦЕНТРОВАНА, А НЕ СДВИНУТА ХОДОМ. Замерено у эталона: переполнение уходит в обе
   * стороны поровну, поэтому первая плитка начинается ЛЕВЕЕ края ленты, а последняя кончается
   * правее. Полей у ленты нет - она идёт край в край секции.
   */
  margin-inline:auto;
}

/* Под курсором лента замирает - её читают глазами, а не догоняют. То же правило у галереи. */
.ls-logos__marq:hover .ls-logos__track{animation-play-state:paused}

/* «Меньше движения» - значит стоять. Второй проход дорожки при этом остаётся: он не мешает. */
@media (prefers-reduced-motion:reduce){
  .ls-logos__track{animation:none}
}

.ls-logos__lane{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:var(--ls-lg-cell-gap);
  padding-inline-end:var(--ls-lg-cell-gap);
}

.ls-logos__lane .ls-logos__cell{
  inline-size:var(--ls-lg-cell-min);
  block-size:var(--ls-lg-cell-h);
  flex:none;
  position:relative;
  padding:0;
}

/*
 * КАДР ЛЕНТЫ МЕНЬШЕ ПЛИТКИ, И ЭТО ЗАМЕР. У эталона плитка 192x96, а сам кадр 144x48 - то есть
 * поле по 24 с боков и по 24 сверху и снизу. Прежде клетка ленты брала общее правило семьи A
 * (поле 24, высота из `--ls-lg-cell-h`), и кадр выходил 99x74 вместо 144x48: пропорция знака
 * ломалась, логотип вытягивался вверх.
 */
.ls-logos__lane .ls-logos__cell img{
  max-inline-size:var(--ls-lg-shot);
  max-block-size:var(--ls-lg-shot-h);
}

/*
 * РАЗДЕЛИТЕЛЯ МЕЖДУ ЗНАКАМИ БОЛЬШЕ НЕТ - ОТСТУПЛЕНИЕ ОТ ЭТАЛОНА ПО ЗАМЕЧАНИЮ ВЛАДЕЛЬЦА.
 *
 * У эталона между плитками стоит капсула 22x6, и она была перенесена дословно вместе с
 * замером. 15.09.2026 владелец спросил о ней прямо: «что это за странные палочки с
 * закруглёнными бордерами по бокам между логотипами? что они делают? что они символизируют? я
 * не понимаю».
 *
 * Это и есть ответ: орган, о котором спрашивают «что это», не сообщает ничего - он только
 * отнимает место, которого на телефоне и так нет. Перенос был верным (эталон рисует именно
 * так), решение - наше, и оно записано здесь, чтобы следующий заход не «починил» пропажу
 * обратно, сверяясь с эталоном.
 */

/*
 * ФИЛЬТР ПЕРЕНЕСЁН НЕ ДОСЛОВНО, И ЭТО ОБЪЯВЛЕННОЕ ОТСТУПЛЕНИЕ.
 *
 * У эталона стоит `brightness(0) invert(1)` - силуэт в белый. Это работает ровно потому, что
 * у него плоскость тёмная. Наш фон приходит из палитры клиента и бывает светлым: белый силуэт
 * на белой бумаге исчез бы целиком, и заметить это можно было бы только глазами, на живом
 * сайте. Поэтому берётся обесцвечивание, не зависящее от фона.
 */
.ls-logos-sec--strip .ls-logos__cell img{filter:grayscale(1);opacity:.65}
.ls-logos-sec--strip .ls-logos__cell:hover img{filter:none;opacity:1}

@container ls (max-width:1040px){
  /* Замерено на планшете: плитка 156x78, кадр 117x39, разделитель 44x5. */
  .ls-logos-sec--strip{
    --ls-lg-pad:48px;
    --ls-lg-gap:36px;
    --ls-lg-cell-min:156px;
    --ls-lg-cell-h:78px;
    --ls-lg-shot:117px;
    --ls-lg-shot-h:39px;
    --ls-lg-sep:44px;
  }
}

@container ls (max-width:700px){
  /*
   * ЗНАК КРУПНЕЕ ЭТАЛОННОГО - ОТСТУПЛЕНИЕ, НАЗВАННОЕ ВЛАДЕЛЬЦЕМ 15.09.2026.
   *
   * Замерено у эталона на телефоне: плитка 134x67, кадр 101x34. Числа перенесены дословно и
   * дословно же воспроизвели беду: «на мобильном телефоне такие крошечные логотипы не
   * разглядеть». Лента при этом ЕДЕТ, то есть знак виден мельком - тем более он обязан быть
   * читаемым.
   *
   * Новые числа не подобраны, а выровнены по соседям: на этой же ширине знак семей A, D и E
   * выходит 129x31. Один знак на телефоне не может быть на четверть мельче другого только
   * потому, что стоит в ленте. Плитка поднята пропорционально кадру - отношение эталона (134
   * к 101) сохранено.
   *
   * Разделитель между плитками снят выше и здесь уже ничего не держит; переменная оставлена -
   * её читает отступ клетки.
   */
  .ls-logos-sec--strip{
    --ls-lg-pad:40px;
    --ls-lg-gap:28px;
    --ls-lg-cell-min:171px;
    --ls-lg-cell-h:72px;
    --ls-lg-shot:129px;
    --ls-lg-shot-h:43px;
    --ls-lg-sep:38px;
  }
}

/* --- Наборы D и E: квадратная клетка --- */

/*
 * Замерено у эталона:
 *   D - 5 колонок, клетка 283x283, кадр 187x187, зазор 18; на узких 2 колонки, 344x344 и
 *       185x185, зазоры 14.65 и 12.56;
 *   E - боковая колонка шапки `232px 576px`, ряд 5 колонок, клетка 232x232, кадр 136x136,
 *       зазор 24; на планшете 3 колонки по 221, на телефоне 2 по 183.
 *
 * Хозяин числа колонок тот же, что у семьи A: минимальная клетка. На контейнере 1536 ряд
 * шириной 1488 при минимуме 283 и зазоре 18 даёт ровно ПЯТЬ колонок - число эталона сходится
 * само, как сошлись восемь у первого набора.
 */
.ls-logos-sec[data-shape="square"]{
  --ls-lg-cell-min:283px;
  --ls-lg-cell-gap:18px;
}

/*
 * Квадрат объявляется пропорцией, а не второй высотой: два числа одного смысла разъехались бы.
 *
 * ПОЛЕ КЛЕТКИ ЗДЕСЬ 48, А НЕ 24, И ЭТО СЧИТАНО ИЗ ЗАМЕРА, А НЕ ПОДОБРАНО. У эталона кадр
 * занимает 187 из 283 у набора D и 136 из 232 у E - в обоих случаях разница ровно 96, то есть
 * по 48 с каждой стороны. Одно число объясняет оба набора; при поле 24 кадры выходили 235 и 184.
 */
.ls-logos-sec[data-shape="square"] .ls-logos__cell{
  block-size:auto;
  aspect-ratio:1;
  /*
   * ПОЛЕ - ДОЛЯ, А НЕ ПОСТОЯННОЕ ЧИСЛО, И ЭТО ПОЧИНКА ПО ЗАМЕЧАНИЮ ВЛАДЕЛЬЦА 15.09.2026:
   * «логотипы D1 и E1 крошечные, их вообще не разглядеть».
   *
   * Замерено на телефоне (375): клетка 161, поле 48 с каждой стороны - под знак остаётся 65, и
   * при пропорции марки 200x48 её высота выходит ШЕСТНАДЦАТЬ точек. На широкой ширине то же
   * число безобидно: клетка 283, поле 48 - это 17%, кадр 187, ровно эталон.
   *
   * Записанный класс проекта: постоянное число из макета живёт ровно на той ширине, где его
   * замерили. Поэтому здесь остаётся ОТНОШЕНИЕ эталона (48 из 283 = 17%), а потолок держит
   * замеренное число на широких клетках. Проценты у поля считаются от ШИРИНЫ - это и нужно:
   * клетка квадратная. На 375 выходит поле 27 и кадр 107 вместо 65.
   */
  padding:min(17%,48px);
}

/*
 * ДВА КЛАССА, А НЕ ОДИН, И ЭТО НЕ КОСМЕТИКА. Правило формы выше написано классом ПЛЮС
 * признаком (`.ls-logos-sec[data-shape="square"]`), то есть весит 0-2-0; одиночный `.ls-lg-e1`
 * весит 0-1-0 и проигрывает при полностью верном значении. Замерено: клетка E выходила 283.19
 * вместо 232 - число набора D. Записанный класс: правило, написанное одиночным классом,
 * проигрывает правилу из двух.
 */
.ls-logos-sec.ls-lg-e1{
  --ls-lg-cell-min:232px;
  --ls-lg-cell-gap:24px;
}

/*
 * РЯД E НАЧИНАЕТСЯ ПОД ПРАВОЙ КОЛОНКОЙ ШАПКИ, А НЕ ОТ КРАЯ - И ЭТО ЗАМЕР.
 *
 * У эталона ряд 1256 при контейнере 1536: боковая колонка забирает 232 плюс зазор. Первая
 * редакция тянула ряд во всю ширину, `auto-fit` укладывал в него те же пять колонок и растягивал
 * клетку до 278.39 вместо 232 - числа расходились при полностью верном минимуме.
 *
 * Отступ логический: в RTL колонка уедет вправо вместе с шапкой.
 */
.ls-lg-e1 .ls-logos__row{margin-inline-start:232px}

/*
 * ШАПКА С НАДНАДПИСЬЮ СБОКУ. Замерено `232px 576px`: слева слово кеглем 12.8, справа заголовок
 * и абзац. Черта у наднадписи здесь не нужна - она держала отбивку в строке, а в своей колонке
 * отбивать нечего.
 */
.ls-logos-sec--aside .ls-logos__head{
  grid-template-columns:232px minmax(0,576px);
  grid-template-areas:"eb title" ". lead";
  gap:16px 0;
  align-items:start;
}

.ls-logos-sec--aside .ls-logos__eb{grid-area:eb}
.ls-logos-sec--aside .ls-logos__eb::after{content:none}
.ls-logos-sec--aside .ls-logos__title{grid-area:title}
.ls-logos-sec--aside .ls-logos__lead{grid-area:lead}

/* Набор D: шапка столбцом, заголовок и абзац друг под другом (замерено). */
.ls-logos-sec--stack .ls-logos__head{justify-items:start;text-align:start;gap:16px}

@container ls (max-width:1040px){
  /*
   * ЧИСЛО КОЛОНОК СЧИТАЕТСЯ ПО КЛЕТКЕ, А НЕ НАЗЫВАЕТСЯ ЧИСЛОМ - И ЭТО ПОЧИНКА ПО ЖИВОМУ ЗАМЕРУ.
   *
   * Здесь стояли ПЛАНШЕТНЫЕ числа эталона прямо: `repeat(2)` у D и `repeat(3)` у E, снятые при
   * контейнере 751. Ветка же работает на всём диапазоне 700-1040, и на её верхнем краю две
   * колонки растягивались до 481 при квадратной клетке - логотип занимал пол-экрана. Замерено
   * на бумаге редактора 1025: клетка D 481x481 при кадре 385, клетка E 313x313. У эталона
   * клетка НИКОГДА не бывает больше 344 (планшет) - на десктопе она 283 и 232. Владелец
   * назвал это прямо: «фактический результат абсолютно кривой».
   *
   * Счёт по минимальной клетке даёт те же числа эталона на замеренных ширинах и разумные
   * между ними: у D при 705 выходит 2 по 344 (ровно эталон), при 1025 - 3 по 330, при 1536 -
   * 5 по 293 против эталонных 283; у E при 705 - 3 по 222 (эталон 221), при 1025 - 4 по 242.
   * Переход через порог гладкий: 1039 даёт 3 по 334, 1041 - 3 по 335.
   *
   * Правило весит 0-2-0 (класс плюс класс) и потому перебивает `repeat(4, ...)` планшетной
   * ветки семьи A - ту самую, ради обхода которой числа и назывались прямо.
   *
   * МИНИМУМ У D В УЗКОЙ ВЕТКЕ НЕ ПОНИЖАЕТСЯ. Прежние 344 - это КЛЕТКА планшета, а не её
   * минимум; подставленная минимумом, она снова давала бы две колонки на 1025.
   */
  .ls-logos-sec.ls-lg-d1{--ls-lg-cell-gap:14.65px}
  .ls-logos-sec.ls-lg-e1{--ls-lg-cell-min:221px;--ls-lg-cell-gap:19.53px}
  .ls-logos-sec.ls-lg-d1 .ls-logos__row,
  .ls-logos-sec.ls-lg-e1 .ls-logos__row{
    grid-template-columns:repeat(auto-fit,minmax(var(--ls-lg-cell-min),1fr));
  }

  /* Вместе с колонкой уходит и отступ ряда: держать его было бы нечему. */
  .ls-lg-e1 .ls-logos__row{margin-inline-start:0}

  /* Боковая колонка схлопывается вместе с местом под неё - как деление у семьи A. */
  .ls-logos-sec--aside .ls-logos__head{
    grid-template-columns:1fr;
    grid-template-areas:"eb" "title" "lead";
    gap:16px;
  }
}

@container ls (max-width:700px){
  /*
   * КВАДРАТ ОСТАЁТСЯ ШИРОКОЙ ВЕТКЕ, А НА ТЕЛЕФОНЕ КЛЕТКА СТАНОВИТСЯ НИЖЕ - И ЭТО НАШЕ ЧИСЛО.
   *
   * Форма снята у эталона на его ширине: клетка 283 при кадре 187 - знак занимает две трети, и
   * квадрат вокруг него читается как воздух. На 375 та же форма даёт клетку 161x161 при знаке
   * 106x26: воздуха 135 точек по вертикали, и владелец читает это как «крошечный логотип»
   * (замечание 15.09.2026). Узкие значения этой оси у нас и так ВЫВЕДЕНЫ, а не сняты, - долг
   * назван в `docs/dolgi.md`, - поэтому расхождения с замером здесь нет: сверять пока не с чем.
   *
   * 16/9 выбрано не на глаз: при нём клетка 161x91 и знак 129x31 - ровно те же числа, что у
   * семьи A на этой же ширине. Один знак на телефоне не может быть вдвое мельче другого только
   * потому, что стоит в другом наборе.
   *
   * Поле тоже сжимается: 17% эталона на клетке 161 - это 27 точек с каждой стороны, то есть
   * треть ширины под пустоту. Десять процентов дают 16 - столько же, сколько у соседей.
   */
  .ls-logos-sec[data-shape="square"] .ls-logos__cell{
    aspect-ratio:16 / 9;
    padding:10%;
  }

  /* Замерено: у D 2 колонки по 185, у E - 2 по 183. Общее правило узкой ветки уже даёт две,
     поэтому здесь только числа. */
  .ls-logos-sec.ls-lg-d1{--ls-lg-cell-min:185px;--ls-lg-cell-gap:12.56px}
  .ls-logos-sec.ls-lg-e1{--ls-lg-cell-min:183px;--ls-lg-cell-gap:16.75px}
  .ls-logos-sec.ls-lg-d1 .ls-logos__row,
  .ls-logos-sec.ls-lg-e1 .ls-logos__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Набор F: строки имён, без картинок --- */

/*
 * Замерено у эталона: `img` ноль, `svg` ноль. Печатаются наши шесть названий во всю ширину.
 *
 * | ширина | список | строка | кегль | зазор |
 * | 1670 | 1488x511 | 1488x70 | 61.04 | 18 |
 * | 766  | 703x412  | 703x57  | 49.18 | 14.65 |
 * | 446  | 383x351  | 383x48  | 41.80 | 12.56 |
 *
 * Кегль здесь СВОЙ, а не общий `--ls-h2`: у заголовка секции он 48.83, у строки имени 61.04 -
 * то есть имя компании крупнее заголовка. Это свойство набора, и повторяется оно на всех трёх
 * ширинах.
 */
.ls-logos-sec--lines{
  --ls-lg-line:61.04px;
  --ls-lg-line-gap:18px;
}

.ls-logos__lines{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--ls-lg-line-gap);
}

.ls-logos__line{display:block}

.ls-logos__name{
  margin:0;
  font-family:var(--ls-head-face,var(--ls-text-face,system-ui));
  font-size:var(--ls-lg-line);
  line-height:1.15;
  /* Замерено у эталона: 61.0352px ВЕСОМ 600. Здесь стояло 500 - на глаз неотличимо, а
     записанное правило проекта говорит прямо: вес решает строку, и на глаз это не видно. */
  font-weight:600;
}

@container ls (max-width:1040px){
  .ls-logos-sec--lines{--ls-lg-line:49.18px;--ls-lg-line-gap:14.65px}
}

@container ls (max-width:700px){
  .ls-logos-sec--lines{--ls-lg-line:41.8px;--ls-lg-line-gap:12.56px}
}

/* --- Набор G: лента, которую листают рукой --- */

/*
 * Замерено у эталона: слот `basis-1/6` на широкой, `1/4` на планшете, `1/3` на телефоне;
 * дорожка `flex cursor-grab`, картинок ноль, подписи кеглем 12.8, шапки нет вовсе.
 *
 * | ширина | секция | дорожка | слот | доля | видно из шести |
 * | 1670 | 1655x138 | 1488x138 | 248x138 | 1/6 | 6 |
 * | 766  | 751x114  | 703x114  | 176x114 | 1/4 | 4 |
 * | 446  | 431x83   | 383x83   | 128x83  | 1/3 | 3 |
 *
 * Доли сходятся с замером точно: 1488/6 = 248, 703/4 = 175.75, 383/3 = 127.7.
 */
/*
 * ВЕРТИКАЛЬНЫХ ПОЛЕЙ У ЭТОГО НАБОРА НЕТ ВОВСЕ, И ЭТО СЧИТАНО ИЗ ЗАМЕРА. Секция эталона 1655x138
 * при дорожке 1488x138 - высота секции равна высоте дорожки, значит сверху и снизу ноль.
 * Единственный такой набор из семи: у остальных поле от 40 до 120.
 */
.ls-logos-sec--drag{
  --ls-lg-pad:0px;
  --ls-lg-slot:calc(100% / 6);
  --ls-lg-slot-h:138px;
}

/*
 * ЛИСТАЕТСЯ НАТИВНОЙ ПРОКРУТКОЙ. Пальцем, колесом, полосой и клавишами - и всё это без единой
 * строки скрипта. Мышью потянуть нельзя: у эталона это умеет `cursor-grab`, и цена решения
 * названа в рендерере.
 *
 * Полоса прокрутки убрана намеренно: она сама по себе орган листания, но здесь дублирует
 * очевидный жест и режет 15 точек высоты - записанная грабля о переполненной панели.
 */
.ls-logos__drag{
  margin:0;
  padding:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:inline mandatory;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}

.ls-logos__drag::-webkit-scrollbar{display:none}

/* Дорожка - список: флекс в ряд. Пока Swiper не завёлся (или скрипта нет), ряд листается
   нативной прокруткой обёртки; заведённый Swiper сам двигает дорожку, и прокрутка обёртки
   гасится - иначе два механизма тянули бы одну ленту (09.10.2026). Имя своё, а не
   `__track`: то занято бегущей лентой набора C вместе с её анимацией. */
.ls-logos__lane{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
}

.ls-logos__drag.swiper-initialized{overflow:hidden;scroll-snap-type:none}

.ls-logos__slot{
  flex:0 0 var(--ls-lg-slot);
  block-size:var(--ls-lg-slot-h);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:16px;
  box-sizing:border-box;
  scroll-snap-align:start;
}

.ls-logos__cap{
  margin:0;
  font-size:var(--ls-eb,12.8px);
  line-height:1.4;
  font-weight:500;
  letter-spacing:.025em;
  white-space:nowrap;
  color:var(--ls-muted,#666);
}

@container ls (max-width:1040px){
  .ls-logos-sec--drag{--ls-lg-pad:0px;--ls-lg-slot:calc(100% / 4);--ls-lg-slot-h:114px}
}

@container ls (max-width:700px){
  .ls-logos-sec--drag{--ls-lg-pad:0px;--ls-lg-slot:calc(100% / 3);--ls-lg-slot-h:83px}
}