/* РАСКЛАДКИ ГАЛЕРЕИ - ЗЕРКАЛО, А НЕ СВОЯ ВЕРСИЯ.

   Источник: design/v4/site-gallery/kit/ (1 файл). Собирает tools/adopt-gallery.php;
   правка руками теряется при следующем срезе и теряется молча.

   Отступления от побайтовой копии объявлены В КОДЕ ИНСТРУМЕНТА и печатаются отчётом
   прогона. Их 44. */

/* ===== gallery.css ===== */
/* ============================================================
   ls-gal · секция «Галерея» · кит

   Роли палитры и гарнитур приходят из темы и запасных значений
   НЕ имеют намеренно: запасное для роли - это жёсткий цвет, а
   жёстких цветов в этом слое нет ни одного. Кит без темы обязан
   явно не работать, а не рисоваться приблизительно.
   Структурные чужие величины запасные имеют: без темы кит
   считает геометрию, но не красит.
   Список чужих имён - 02-TOKENS.

   Правил, рассчитанных перебить инлайн, здесь нет: инлайн от PHP
   бьёт таблицу стилей, но не бьёт пользовательское свойство.
   Приоритетных пометок нет ни одной.
   Все условия ширины контейнерные, диапазонной формой.
   ============================================================ */

.ls-gal {
  /* плотность течёт одной единицей; кегли и цели от неё НЕ считаются */
  --ls-gal-u: clamp(4px, calc(3.2176px + .2174cqi), 6px);
  --ls-gal-gap: calc(var(--ls-gal-u) * 3);

  --ls-gal-cols: 3;
  --ls-gal-slot: calc((100cqi - 2 * var(--ls-gal-pin) - (var(--ls-gal-cols) - 1) * var(--ls-gal-gap)) / var(--ls-gal-cols));
  --ls-gal-slot-min: 128px;   /* ступень «плашка значками» */
  --ls-gal-ar: 4 / 3;
  --ls-gal-h: calc(var(--ls-gal-slot) * 1.0537);   /* отношение 484:510 */

  --ls-gal-cap-fs: clamp(16px, 1.11cqi, 18px);
  --ls-gal-cap-lines: 2;
  --ls-gal-veil: .38;
  --ls-gal-veil-h: calc(var(--ls-gal-cap-fs) * 1.45 * 2 + 24px);

  --ls-gal-step: calc(var(--ls-gal-slot) + var(--ls-gal-gap));
  --ls-gal-peek: 24px;
  --ls-gal-organ-hit: 44px;
  --ls-gal-organ-size: 9px;
  --ls-gal-organ-fade: .4;
  --ls-gal-dots-max: 14;
  --ls-gal-speed: 100;        /* точек в секунду - СКОРОСТЬ, не длительность */

  padding-block: var(--ls-gal-pad, 96px);
  --ls-gal-pin: max(var(--ls-page-gut, 24px), (100cqi - var(--ls-max, 1536px)) / 2);
  padding-inline: var(--ls-gal-pin);
  background: var(--ls-paper);
  color: var(--ls-ink);
  display: flex;
  flex-direction: column;
  gap: calc(var(--ls-gal-u) * 7);
}

/* выбор числа колонок - признаком: инлайн победил бы узкую ветку по силе */
.ls-gal[data-cols="2"] { --ls-gal-cols: 2; }
.ls-gal[data-cols="3"] { --ls-gal-cols: 3; }
.ls-gal[data-cols="4"] { --ls-gal-cols: 4; }

/* заголовочный блок: зазор живёт на gap, поэтому отсутствующая часть
   не оставляет за собой отступа */
.ls-gal[data-width="full"] { --ls-gal-pin: var(--ls-page-gut, 24px); }
.ls-gal__head { display: flex; flex-direction: column; gap: calc(var(--ls-gal-u) * 2); max-inline-size: 46rem; }
/* отступление: две группы внутри блока - ради оси «размещение текста» */
.ls-gal__lead, .ls-gal__rest { display: flex; flex-direction: column; gap: calc(var(--ls-gal-u) * 2); }
/* отступление: по центру */
.ls-gal[data-align="center"] .ls-gal__head { inline-size: 100%; margin-inline: auto; text-align: center; }
.ls-gal[data-align="center"] .ls-gal__lead, .ls-gal[data-align="center"] .ls-gal__rest { align-items: center; }
.ls-gal[data-align="center"] .ls-gal__actions { justify-content: center; }
/* отступление: раздельно - заголовок в первой колонке, абзац и кнопки во второй */
.ls-gal[data-align="split"] .ls-gal__head {
  max-inline-size: none;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  column-gap: clamp(24px, 11cqi, 160px);
  align-items: start;
}
.ls-gal__eyebrow {
  font-family: var(--ls-text-face);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ls-muted);
}
.ls-gal__title {
  margin: 0;
  font-family: var(--ls-head-face);
  font-size: clamp(26px, 2.64cqi, 38px);
  line-height: 1.2;
  color: var(--ls-ink);
  text-wrap: pretty;
}
.ls-gal__text {
  margin: 0;
  font-family: var(--ls-text-face);
  font-size: clamp(16px, 1.18cqi, 17px);
  line-height: 1.55;
  color: var(--ls-muted);
  text-wrap: pretty;
}
.ls-gal__actions { display: flex; flex-wrap: wrap; gap: calc(var(--ls-gal-u) * 2); }
.ls-gal__btn {
  box-sizing: border-box;   /* цель объявляется вместе с мерой по границе */
  min-block-size: 44px;
  padding-block: 10px;
  padding-inline: 18px;
  border: 1px solid var(--ls-ink);
  border-radius: calc(18px * var(--ls-r-k, 1));
  background: var(--ls-paper);
  color: var(--ls-ink);
  font-family: var(--ls-text-face);
  font-size: 16px;
  cursor: pointer;
}
.ls-gal__btn--primary { background: var(--ls-acc); color: var(--ls-acc-on); border-color: var(--ls-acc); }
.ls-gal__btn:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 3px; }

/* гнездо: мера по границе - иначе волосяная линия ложится сверху
   и объявленные 312 рендерятся как 314 */
.ls-gal__slot {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ls-line);
  border-radius: calc(18px * var(--ls-r-k, 1));
  background: var(--ls-band);
  aspect-ratio: var(--ls-gal-ar, 4 / 3);
}
.ls-gal--fixed-h .ls-gal__slot { aspect-ratio: auto; block-size: var(--ls-gal-h); }.ls-gal--set-1 .ls-gal__slot--w2 { grid-column: span 2; }.ls-gal--set-1 .ls-gal__slot--w3 { grid-column: span 3; }.ls-gal--set-1 .ls-gal__slot--w4 { grid-column: span 4; }.ls-gal--set-1[data-shape] .ls-gal__slot { aspect-ratio: var(--ls-gal-ar); block-size: auto; }
/* .ls-gal__img снят зеркалом: общий печатник снимка одевает <img> теми же четырьмя
   свойствами инлайном, а инлайн бьёт таблицу стилей - правило не сработало бы никогда. */
.ls-gal__slot:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 3px; }

/* признак «кадр открывается» - только там, где набор объявил открытие */
.ls-gal[data-open="1"] .ls-gal__slot { cursor: pointer; }
.ls-gal[data-open="1"] .ls-gal__ribbon .ls-gal__slot { cursor: inherit; }
.ls-gal__slot, .ls-gal__slot img { user-select: none; -webkit-user-drag: none; }
.ls-gal[data-open="1"] .ls-gal__zoom {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  inline-size: 36px;
  block-size: 36px;
  border-radius: calc(18px * var(--ls-r-k, 1));
  background: var(--ls-ink);
  color: var(--ls-paper);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--ls-dur-fast, 200ms) ease-out;
}
.ls-gal[data-open="1"] .ls-gal__slot:hover .ls-gal__zoom,
.ls-gal[data-open="1"] .ls-gal__slot:focus-visible .ls-gal__zoom { opacity: 1; }
.ls-gal[data-edit] .ls-gal__zoom { display: none; }   /* в правке нажатие принадлежит плашке */

/* подпись */
.ls-gal__cap {
  margin: 0;
  font-family: var(--ls-text-face);
  font-size: var(--ls-gal-cap-fs);
  line-height: 1.45;
  color: var(--ls-ink);
  display: -webkit-box;
  -webkit-line-clamp: var(--ls-gal-cap-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: calc(var(--ls-gal-cap-fs) * 1.45 * var(--ls-gal-cap-lines));
}
.ls-gal__cap--over {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: calc(var(--ls-gal-u) * 3);
  min-block-size: var(--ls-gal-veil-h);
  color: var(--ls-ink-on-media);
  /* служебный градиент из двух точек ОДНОЙ роли, по блочной оси:
     горизонтальный не зеркалится сам */
  background: linear-gradient(to top,
    rgb(from var(--ls-veil-ink) r g b / var(--ls-gal-veil)),
    rgb(from var(--ls-veil-ink) r g b / 0));
  display: flex;
  align-items: flex-end;
}

/* ---------- наборы 1-5: сетки ---------- */
.ls-gal__grid {
  display: grid;
  gap: var(--ls-gal-gap);
  grid-template-columns: repeat(var(--ls-gal-cols), 1fr);
  justify-items: stretch;   /* хвост ряда по началу строки, не по центру */
}
.ls-gal--set-2 { --ls-gal-h-tall: calc(var(--ls-gal-slot) * 1.7257); --ls-gal-h-low: calc(var(--ls-gal-slot) * .843); }
.ls-gal--set-2 .ls-gal__grid { align-items: start; }
/* отступление: кадры по центру ряда - выбор человека */
.ls-gal--set-2[data-valign="center"] .ls-gal__grid { align-items: center; }
.ls-gal--set-2 .ls-gal__col { display: flex; flex-direction: column; gap: var(--ls-gal-gap); }
.ls-gal--set-2 .ls-gal__slot { aspect-ratio: auto; block-size: var(--ls-gal-h-low); }
.ls-gal--set-2 .ls-gal__slot--tall { block-size: var(--ls-gal-h-tall); }
.ls-gal--set-3 { --ls-gal-row: calc((100cqi - 2 * var(--ls-gal-pin) - var(--ls-gal-gap)) / 2 * .3537); }.ls-gal--set-3 .ls-gal__slot--col2 { grid-column: 2; }
.ls-gal--set-3 .ls-gal__grid { --ls-gal-cols: 2; grid-auto-rows: var(--ls-gal-row); grid-auto-flow: row dense; }
.ls-gal--set-3 .ls-gal__slot { aspect-ratio: auto; block-size: auto; }
.ls-gal--set-3 .ls-gal__slot--r1 { grid-row: span 1; }
.ls-gal--set-3 .ls-gal__slot--r2 { grid-row: span 2; }
.ls-gal--set-3 .ls-gal__slot--r3 { grid-row: span 3; }
.ls-gal--set-4 .ls-gal__grid { --ls-gal-cols: 2; gap: 48px; }   /* зазор - характер набора */
.ls-gal--set-4 .ls-gal__bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 48px; }
.ls-gal--set-4 .ls-gal__slot--big { aspect-ratio: 1; }.ls-gal--set-4 .ls-gal__block { display: contents; }.ls-gal--set-4 .ls-gal__grid { grid-auto-flow: row dense; }.ls-gal--set-4 .ls-gal__bento .ls-gal__slot { aspect-ratio: 1; }.ls-gal--set-4 .ls-gal__bento--col { grid-template-columns: 1fr; }.ls-gal--set-4 .ls-gal__slot--pair { aspect-ratio: 3 / 2; }.ls-gal--set-4 .ls-gal__slot--strip { grid-column: 1 / -1; aspect-ratio: auto; block-size: calc((100cqi - 2 * var(--ls-gal-pin) - 144px) / 4); }.ls-gal--set-4 .ls-gal__block--three { display: grid; grid-column: 1 / -1; gap: 48px; grid-auto-flow: row dense; grid-template-columns: calc((100% - 48px) * 912 / 1344) 1fr; }.ls-gal--set-4 .ls-gal__block--three.ls-gal__block--mirror { grid-template-columns: 1fr calc((100% - 48px) * 912 / 1344); }
.ls-gal--set-4 .ls-gal__block--mirror .ls-gal__slot--big { grid-column: 2; }   /* зеркалится местом, не порядком данных */
.ls-gal--set-5 { --ls-gal-cell: calc((100cqi - 2 * var(--ls-gal-pin) - 11 * 12px) / 12 * 66 / 105); }
.ls-gal--set-5 .ls-gal__grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: var(--ls-gal-cell); gap: 12px; }
.ls-gal--set-5 .ls-gal__slot { aspect-ratio: auto; block-size: auto; grid-area: var(--ls-gal-area, auto); }

/* ---------- наборы 6-9: ленты ---------- */
.ls-gal__ribbon { overflow: hidden; cursor: grab; touch-action: pan-y; column-gap: var(--ls-gal-gap); }
.ls-gal__ribbon:active { cursor: grabbing; }
/* отступление: на холсте не тянется ни одна лента - ни библиотечная, ни наша */
.ls-gal[data-edit] .ls-gal__ribbon, .ls-gal[data-edit] .ls-gal__ribbon:active { cursor: auto; }
.ls-gal__track { display: flex; scroll-snap-type: inline mandatory; }
.ls-gal__ribbon--bleed .ls-gal__track { column-gap: var(--ls-gal-gap); }
.ls-gal__track > .ls-gal__slot { flex: none; inline-size: calc(100% - var(--ls-gal-peek) - var(--ls-gal-gap)); scroll-snap-align: start; }
.ls-gal--set-6 { --ls-gal-peek: 48px; --ls-gal-ar: 2 / 1; }
.ls-gal--set-7 { --ls-gal-peek: 24px; --ls-gal-ar: 2 / 1; }
.ls-gal--set-8 { --ls-gal-peek: 101px; --ls-gal-ar: 3 / 2; }
.ls-gal--set-8 .ls-gal__track > .ls-gal__slot { inline-size: calc((100% - var(--ls-gal-peek) - 3 * var(--ls-gal-gap)) / 3); }


/* ---------- наборы 9-10: ленты части 3 ----------
   Уезжают за край БУМАГИ, а не показывают по кадру: дорожка выходит
   из поля отрицательным margin-inline, первый кадр остаётся выровнен
   с заголовком через padding-inline-start. Обрез стоит на ленте, а не
   на бумаге, поэтому горизонтальной прокрутки страницы не появляется.
   Признак продолжения - обрез плюс полукадр: растворение у двух краёв
   это два горизонтальных градиента, а они не зеркалятся сами. */
.ls-gal__ribbon--bleed {
  margin-inline: calc(var(--ls-page-gut, 24px) * -1);
  overflow: clip;
}
.ls-gal__ribbon--bleed .ls-gal__track {
  padding-inline-start: var(--ls-page-gut, 24px);
  inline-size: max-content;
  align-items: flex-start;   /* по верху: по центру ряд разных высот читается как ошибка */
}
/* отступление: кадры по центру полосы - выбор человека */
.ls-gal[data-valign="center"] .ls-gal__ribbon--bleed .ls-gal__track { align-items: center; }

.ls-gal--set-9 {
  --ls-gal-gap: 18px;
  --ls-gal-square: 414px;
  --ls-gal-speed: 100;   /* точек в секунду */
  /* длина прохода - БЕЗРАЗМЕРНОЕ число точек: то же имя делит длительность
     (там px недопустим) и множит translate (там px обязателен). Запасное -
     шесть снимков на широкой; настоящее печатает PHP инлайном. */
  --ls-gal-pass: calc(var(--ls-gal-n, 6) * 432);   /* число снимков x шаг широкой ветки */
}
.ls-gal--set-9 .ls-gal__slot { aspect-ratio: 1; inline-size: var(--ls-gal-square); block-size: var(--ls-gal-square); flex: none; }
.ls-gal--set-9 .ls-gal__track { animation: ls-gal-pass calc(var(--ls-gal-pass) / var(--ls-gal-speed) * 1s) linear infinite; }
.ls-gal--set-9 .ls-gal__ribbon:hover .ls-gal__track,
.ls-gal--set-9 .ls-gal__ribbon:focus-within .ls-gal__track { animation-play-state: paused; }
.ls-gal--set-9[data-edit] .ls-gal__track { animation: none; }
/* отступление: человек выключил автопроигрывание - лента стоит */
.ls-gal--set-9[data-still] .ls-gal__track { animation: none; }
/* исключение: логического translate в CSS нет, знак меняется по :dir() */
@keyframes ls-gal-pass { from { translate: 0 0; } to { translate: calc(var(--ls-gal-pass) * -1px) 0; } }
@keyframes ls-gal-pass-rtl { from { translate: 0 0; } to { translate: calc(var(--ls-gal-pass) * 1px) 0; } }
:dir(rtl) .ls-gal--set-9 .ls-gal__track { animation-name: ls-gal-pass-rtl; }
/* второй проход: без адресов, без плашек, без остановок табуляции */
.ls-gal__pass--dup { display: contents; }

.ls-gal--set-10 { --ls-gal-gap: 12px; --ls-gal-c1: 392px; --ls-gal-c2: 285px; --ls-gal-c3-w: 288px; --ls-gal-c3-h: 480px; }
.ls-gal--set-10 .ls-gal__slot { aspect-ratio: auto; flex: none; }
.ls-gal--set-10 .ls-gal__slot--c1 { inline-size: var(--ls-gal-c1); block-size: var(--ls-gal-c1); }
.ls-gal--set-10 .ls-gal__slot--c2 { inline-size: var(--ls-gal-c2); block-size: var(--ls-gal-c2); }
.ls-gal--set-10 .ls-gal__slot--c3 { inline-size: var(--ls-gal-c3-w); block-size: var(--ls-gal-c3-h); }

/* ---------- органы: обычные кнопки с состоянием ---------- */
.ls-gal__organs { display: flex; align-items: center; gap: calc(var(--ls-gal-u) * 2); margin-block-start: 16px; }
.ls-gal__organs--center { justify-content: center; }
.ls-gal__organs--split { justify-content: space-between; }
.ls-gal__dots { display: flex; align-items: center; gap: calc(var(--ls-gal-u) * 2); }
.ls-gal__dot {
  box-sizing: border-box;
  min-inline-size: var(--ls-gal-organ-hit);
  min-block-size: var(--ls-gal-organ-hit);
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ls-gal__dot::before {
  content: "";
  inline-size: var(--ls-gal-organ-size);
  block-size: var(--ls-gal-organ-size);
  border-radius: 50%;   /* декорация: точка остаётся точкой на любой ступени */
  background: var(--ls-ink);
  opacity: var(--ls-gal-organ-fade);
  transition: inline-size var(--ls-dur-fast, 200ms) ease-out,
              block-size var(--ls-dur-fast, 200ms) ease-out,
              opacity var(--ls-dur-fast, 200ms) ease-out;
}
.ls-gal__dot[aria-current="true"] { --ls-gal-organ-size: 12px; --ls-gal-organ-fade: 1; }
.ls-gal__dot:hover { --ls-gal-organ-fade: .7; }
.ls-gal__dot:active::before { inline-size: calc(var(--ls-gal-organ-size) - 2px); block-size: calc(var(--ls-gal-organ-size) - 2px); }
.ls-gal__dot:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: -2px; }
.ls-gal__arrow {
  box-sizing: border-box;
  inline-size: var(--ls-gal-organ-hit);
  block-size: var(--ls-gal-organ-hit);
  border: 1px solid var(--ls-ink);
  border-radius: 50%;   /* декорация: круг остаётся кругом */
  background: none;
  color: var(--ls-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-width var(--ls-dur-fast, 200ms) ease-out;
}
.ls-gal__arrow:hover { border-width: 2px; }
.ls-gal__arrow:focus-visible { outline: 3px solid var(--ls-acc); outline-offset: 3px; }
/* погашенная: снятая обводка ПЛЮС слово рядом. Заливка признаком быть
   не может - приподнятая плоскость к плоскости 1.04-1.09 */
.ls-gal__arrow:disabled { border: 0; color: var(--ls-muted); cursor: default; }
.ls-gal__edge { font-family: var(--ls-text-face); font-size: 15px; color: var(--ls-muted); }
.ls-gal__toggle {
  box-sizing: border-box;
  min-block-size: 44px;
  padding-block: 10px;
  padding-inline: 18px;
  border: 1px solid var(--ls-ink);
  border-radius: calc(18px * var(--ls-r-k, 1));
  background: none;
  color: var(--ls-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ls-text-face);
  font-size: 16px;
  cursor: pointer;
}
.ls-gal__toggle:focus-visible { outline: 3px solid var(--ls-acc); outline-offset: 3px; }
.ls-gal__count {
  box-sizing: border-box;
  margin: 0;
  min-block-size: 44px;   /* та же высота, что у ряда точек: замена органа не двигает ленту */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ls-text-face);
  font-size: 16px;
  color: var(--ls-ink);
  display: none;   /* показывает узкая ветка от восьми снимков */
}

/* исключение: у Material Symbols имена глифов физические, логической пары нет */
.ls-gal__arrow--prev .ls-gal__i::before { content: "chevron_left"; }
.ls-gal__arrow--next .ls-gal__i::before { content: "chevron_right"; }
:dir(rtl) .ls-gal__arrow--prev .ls-gal__i::before { content: "chevron_right"; }
:dir(rtl) .ls-gal__arrow--next .ls-gal__i::before { content: "chevron_left"; }

/* ---------- состояния гнезда: всегда ДВА признака ---------- */
.ls-gal__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  block-size: 100%;
  padding: 16px;
  color: var(--ls-ink);
  text-align: center;
}
.ls-gal__state .ls-gal__i { font-size: 34px; color: var(--ls-muted); }
.ls-gal__state-word { font-family: var(--ls-text-face); font-size: 16px; }
/* признак работы не опирается на форму системы: полоса, не дуга на круге */
.ls-gal__load-bar { inline-size: 60%; block-size: 4px; background: var(--ls-line); overflow: hidden; }
.ls-gal__load-bar::after {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--ls-ink);
  animation: ls-gal-run 1.2s linear infinite;
}
@keyframes ls-gal-run { from { translate: -100% 0; } to { translate: 100% 0; } }

/* ---------- ветки: контейнерные, диапазонной формой ---------- */
@container ls (width <= 1040px) {
  .ls-gal--set-8 .ls-gal__track > .ls-gal__slot { inline-size: calc((100% - var(--ls-gal-peek) - 2 * var(--ls-gal-gap)) / 2); }
}
@container ls (width <= 700px) {
  .ls-gal, .ls-gal[data-cols] { --ls-gal-cols: 2; --ls-gal-dots-max: 7; padding-block: calc(var(--ls-gal-u) * 12); }
  /* множители выведены из «не меньше 2.5 кадров в меру» и «два кадра в меру» */
  .ls-gal--set-9 { --ls-gal-square: 144px; --ls-gal-gap: 12px; --ls-gal-pass: calc(var(--ls-gal-n, 6) * 156); }
  .ls-gal--set-10 { --ls-gal-gap: 8px; --ls-gal-c1: 183px; --ls-gal-c2: 133px; --ls-gal-c3-w: 134px; --ls-gal-c3-h: 224px; }
  .ls-gal--set-1 .ls-gal__slot--w2,  .ls-gal--set-1 .ls-gal__slot--w3,  .ls-gal--set-1 .ls-gal__slot--w4 { grid-column: auto; }  .ls-gal--set-1 .ls-gal__slot:last-child:nth-child(odd) { grid-column: 1 / -1; }  .ls-gal--set-2, .ls-gal--set-3, .ls-gal--set-5,
  .ls-gal--set-2[data-cols], .ls-gal--set-3[data-cols], .ls-gal--set-5[data-cols] { --ls-gal-cols: 1; }
  .ls-gal--set-3 .ls-gal__grid { --ls-gal-cols: 1; }
  .ls-gal--set-3 { --ls-gal-row: calc((100cqi - 2 * var(--ls-gal-pin)) * .7486); }
  .ls-gal--set-5 .ls-gal__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ls-gal--set-5 .ls-gal__slot { grid-area: auto; }
  .ls-gal[data-shots="8"] .ls-gal__dots,
  .ls-gal[data-shots="9"] .ls-gal__dots,
  .ls-gal[data-shots="10"] .ls-gal__dots,
  .ls-gal[data-shots="11"] .ls-gal__dots,
  .ls-gal[data-shots="12"] .ls-gal__dots { display: none; }
  .ls-gal[data-shots="8"] .ls-gal__count,
  .ls-gal[data-shots="9"] .ls-gal__count,
  .ls-gal[data-shots="10"] .ls-gal__count,
  .ls-gal[data-shots="11"] .ls-gal__count,
  .ls-gal[data-shots="12"] .ls-gal__count { display: flex; }
  .ls-gal--set-4 .ls-gal__bento { grid-template-columns: 1fr; grid-template-rows: auto; }  .ls-gal--set-4 .ls-gal__grid { --ls-gal-cols: 1; }  .ls-gal--set-4 .ls-gal__block--three,  .ls-gal--set-4 .ls-gal__block--three.ls-gal__block--mirror { grid-template-columns: 1fr; }  .ls-gal--set-4 .ls-gal__bento .ls-gal__slot { aspect-ratio: 3 / 2; }  .ls-gal--set-4 .ls-gal__slot--pair, .ls-gal--set-4 .ls-gal__slot--strip { aspect-ratio: 3 / 2; block-size: auto; }
  .ls-gal--set-8 .ls-gal__track > .ls-gal__slot { inline-size: calc(100% - var(--ls-gal-peek)); }
  /* три положения заголовочного блока сводятся к одному */
  .ls-gal__head { max-inline-size: none; text-align: start; }
  /* отступление: на узкой раздельное размещение тоже сводится к одной колонке */
  .ls-gal[data-align="split"] .ls-gal__head { display: flex; }
  .ls-gal[data-align="center"] .ls-gal__actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-gal { --ls-gal-speed: 0; }
  .ls-gal *, .ls-gal *::before, .ls-gal *::after { transition-duration: 0s; animation: none; }
}