/* /catalog/view/theme/LESPROM/template/_blocks/breadcrumbs/style.css */
.breadcrumbs {
  display: flex;
  column-gap: 12px;
  align-items: center;
  /* LPD-17: вместо обрезки хвоста (см. комментарий внизу файла) — длинная цепочка
     не переносится и скроллится по горизонтали. На десктопе самая глубокая цепочка
     (карточка товара, 6 пунктов) умещается целиком; скролл работает на мобильном. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.breadcrumbs::-webkit-scrollbar {
  display: none;
}
.breadcrumbs__item {
  white-space: nowrap;
}
.breadcrumbs__separator {
  width: 1px;
  min-width: 1px;
  height: 8px;
  transform: translateY(2px);
  background-color: var(--primary-grey2);
}
.breadcrumbs__link {
  --link-color: var(--primary-grey2);

  font-size: 0.75rem;
  font-weight: var(--fw-regular);
  font-family: var(--font);
}
.breadcrumbs__link:hover {
  --link-hover-color: var(--primary-blue);
}
/* LPD-17: здесь стояло .breadcrumbs li:nth-child(1n + 6) { display:none } —
   обрезка «хвоста» длинных цепочек. Разделители — тоже <li>, поэтому с 6-го li
   скрывался сам текущий пункт: на «Вагонке» посетитель видел только
   «Главная · Каталог · Пиломатериалы», на карточке товара скрывалась половина пути.
   Заменено на overflow-x: auto у .breadcrumbs (см. выше). */
/* /catalog/view/theme/LESPROM/template/_blocks/catalog/top_categories/style.css */
.block-top_categories__list {
  display: grid;
  gap: 24px;
  /* 2026-08-10, решение владельца: пять колонок вместо четырёх. Разделов ровно
     десять, и при четырёх колонках последний ряд оставался наполовину пустым
     (4/4/2); пять дают два полных ряда 5/5. Ряды реестра на раскладку не влияют —
     все карточки лежат прямыми детьми этой сетки. */
  grid-template-columns: repeat(5, 1fr);

  @media screen and (max-width: 768px) {
    display: flex;
    row-gap: 12px;
    flex-direction: column;
  }
}
/* LPD-17 Э6 шаг 3: фото получает собственную зону сверху вместо абсолютного слоя
   за текстом. Раньше картинка стояла `position:absolute; right:0; height:100%`
   и наезжала на подписи подкатегорий («Брус и доска», «Крепеж», «Краски и масла»).
   Порядок в DOM не меняем — переставляем flex-order, чтобы не трогать разметку. */
.block-top_categories__col {
  position: relative;
  display: flex;
  flex-direction: column;
  /* min-height вместо height: длина заголовка и число подссылок разные,
     фиксированная высота обрезала «Брус и доска» и «Фанеру» */
  min-height: 336px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--color-surface);
  transition: border-color .15s ease;
}
.block-top_categories__col:hover {
  border-color: var(--color-border-strong);
}

.block-top_categories__body {
  flex: 1 1 auto;
  min-height: 0;
  /* 168px — высота полосы медиа (она абсолютом, поэтому отступ здесь) */
  padding: calc(168px + 14px) 16px 16px;

  display: flex;
  row-gap: 8px;
  flex-direction: column;
}
.block-top_categories__title {
  font-size: 1.625rem;
  font-weight: var(--fw-extrabold);
  font-family: var(--font-2);
  color: var(--top-categories-col-title-color, var(--top-categories-col-text-color, var(--primary-color)));

  /* ⚠️ 2026-08-10. Сброс ширины нужен и здесь, в базовом правиле, а не только в
     мобильной раскладке и в списке ниже: normalize.css:195 задаёт всем <a>
     width: max-content (DOMAIN_MAP §12), и на десктопе «Террасная и палубная доска»
     разворачивалась в 500px внутри карточки на 330px — текст уезжал за край.
     break-word — второй слой той же защиты: между 769 и ~1024px колонок всё ещё
     четыре, и «Имитация» одним словом шире колонки, а по словам такое не переносится. */
  width: 100%;
  overflow-wrap: break-word;
  /* 2026-08-13 (LPD-21). Переносы по слогам — иначе break-word выше рубит длинное
     слово где придётся: «Термодревесина» не влезает в колонку 261px и на живом
     сайте читалась как «Термодреве / сина». С hyphens браузер ставит дефис по
     слогам, а break-word остаётся последним рубежом для совсем узких мест.
     Работает благодаря lang="ru" на <html> — без него правила переноса не выбрать. */
  hyphens: auto;
  -webkit-hyphens: auto;

  @media screen and (max-width: 768px) {
    font-size: 1.25rem;
  }
}
/* ⚠️ Правила .block-top_categories__links сняты вместе с самим меню-блоком
   (index.twig, макет B): подкатегории больше не выводятся столбиком ссылок, они
   стоят в общей строке тегов. Заодно ушло правило LPD-19 (A-01), поднимавшее их
   тач-цель до 44px — тегам высоту задаёт своё правило ниже. */

/* Подвал: счётчик живых товаров + «Смотреть →». Заменил пустой квадрат-стрелку,
   которая висела в отрыве от текста. Правила nth-child(5) для синей плитки сняты
   вместе с самими подложками (шаг 1). */
.block-top_categories__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--color-hairline);
}
.block-top_categories__count {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.block-top_categories__more {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  min-height: 28px;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-accent-strong);
  text-decoration: none;
  white-space: nowrap;
}
.block-top_categories__more .icon svg {
  width: 14px;
  height: 14px;
}
.block-top_categories__more:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .block-top_categories__more {
    min-height: 44px; /* WCAG 2.5.5 */
  }
}

/* order:-1 — фото первым визуально, при неизменном порядке в разметке */
/* Фото — собственной полосой сверху, но АБСОЛЮТОМ, а не в потоке.
   ⚠️ Проверено экспериментом: тот же `<img>`, поставленный в поток
   (`width:100%; height:168px` как flex-элемент), приводит к тому, что две левые
   колонки сетки перестают прокрашиваться — при полностью корректных DOM/CSSOM
   (замер: контур и фон на месте, `img.complete=true`, пиксель — ровный #F9FBFC).
   Воспроизводилось в трёх браузерах; с абсолютным позиционированием не возникает.
   Поэтому: полоса медиа задаётся абсолютом сверху, а тело отступает padding-top. */
.block-top_categories__image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 168px;
  overflow: hidden;
  background-color: var(--color-surface-sunken);
}
.block-top_categories__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 2026-08-10. Мобильная плитка (макет, вариант A — выбор владельца) ──────────
   Было: одна карточка на строку, внутри заголовок, список подкатегорий и подвал
   «N товаров · Смотреть». Списки у разных разделов разной длины, поэтому карточки
   выходили разной высоты (замер: 336 / 336 / 338 / 361 / 426px), а у тех, где
   подкатегорий нет, между заголовком и подвалом зияла пустота — с этого и начался
   разговор о блоке.

   Стало: две колонки, одинаковые карточки, в каждой фото, название и счётчик.
   Список подкатегорий на телефоне снят: он дублирует мегаменю, до которого отсюда
   один тап, а здесь ломал ритм. На десктопе всё остаётся как было — там ширины
   хватает и списки работают навигацией. */
@media screen and (max-width: 768px) {
  .block-top_categories__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Ряд тянется по самой высокой карточке: названия разной длины («Террасная и
       палубная доска» в три строки против «Планкен» в одну) иначе дают разную
       высоту в одном ряду — с этого и начался разговор о блоке. */
    grid-auto-rows: 1fr;
    gap: 10px;
  }

  .block-top_categories__col {
    min-height: 0;
  }

  /* 2026-08-13 (LPD-21). Карточек стало 15 — нечёт, и в двух колонках последняя
     повисала одна, оставляя полряда пустым. Растягиваем её на всю ширину: ряд
     закрывается, а карточка читается как завершение блока, а не как обрыв.
     :nth-child(odd) обязателен — при чётном числе карточек правило не должно
     срабатывать вовсе. Высоту фото не трогаем: она считается от 50vw, поэтому
     широкая карточка получает панорамный кадр той же высоты, что соседние. */
  .block-top_categories--tiles .block-top_categories__col:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Пропорция 4:3, а не 16:9. Причина в исходниках: кадры категорий квадратные
     (300×300, 500×500, 1280×1280), и широкая полоса вырезала из центра пустое
     место — на экране это читалось как «фото не загрузилось», хотя картинки
     грузились исправно (проверено: naturalWidth > 0 у всех десяти). 4:3 ближе к
     исходной пропорции и показывает сам материал. */
  /* ⚠️ Фото ставится В ПОТОК, а не абсолютом — вопреки правилу из шапки файла.
     Там абсолют выбран потому, что в потоке ломалась прокраска ОДНОКОЛОНОЧНОЙ
     раскладки. В двух колонках всё наоборот: с абсолютом три плитки из четырёх
     оставались серыми при полностью исправном DOM (elementFromPoint возвращает
     IMG, complete=true, naturalWidth>0, зона и картинка по 125px — замерено), а
     в потоке рисуются все. Проверено прямо в браузере на обоих вариантах;
     translateZ(0) и снятие overflow:hidden эффекта не давали.
     order:-1 не нужен: в разметке фото идёт после тела, но flex-порядок задаёт
     order у тела — см. ниже. */
  .block-top_categories__image {
    position: static;
    order: -1;
    width: 100%;
    height: calc((50vw - 21px) * 0.75);
  }

  .block-top_categories__body {
    /* Фото теперь в потоке, поэтому отступ под него не нужен — только собственные
       поля карточки. */
    padding: 10px;
    row-gap: 2px;
  }

  .block-top_categories__title {
    font-size: 0.95rem;
    line-height: var(--leading-tight);
    text-decoration: none;
    /* ⚠️ Обязательно. Заголовок стал ссылкой, а normalize.css:195 задаёт всем <a>
       ширину max-content (DOMAIN_MAP §12). Без сброса «Имитация бруса», «Террасная
       и палубная», «Вагонка и штиль» не переносились и уезжали за край карточки —
       ровно так это и выглядело на первом прогоне. */
    width: 100%;
  }

  /* «Смотреть» — только на десктопе (см. комментарий выше): на телефоне цель у
     карточки одна и ею работает вся карточка. */
  .block-top_categories__more {
    display: none;
  }

  .block-top_categories__foot {
    margin-top: 2px;
    padding: 0;
    border: 0;
    min-height: 0;
  }
  .block-top_categories__count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  /* Кликабельна вся карточка: цель у неё одна, и дробить её на мелкие ссылки
     на телефоне незачем. 44px по WCAG набираются самой карточкой. */
  .block-top_categories__title::after {
    content: '';
    position: absolute;
    inset: 0;
  }
}

/* ═══ Списочный вид каталога (макет, вариант B — выбор владельца 2026-08-10) ═══
   Строка: миниатюра, название, породы, счётчик справа. Плитка на главной остаётся
   без изменений — здесь всё под классом-модификатором --list.

   Почему породы, а не подкатегории: у четырёх разделов из десяти дочерних разделов
   нет вовсе, и вторая строка пустовала. Порода есть у девяти из десяти и говорит
   покупателю больше — «Вагонка: сосна, ангарская сосна, липа, лиственница, осина».
   Данные — из фильтра материала, см. pxl_data::getCategoryMaterials.

   На десктопе две колонки, а не одна: строка во всю ширину контейнера (1416px)
   разносит название и счётчик на полэкрана, и связь между ними теряется. */
.block-top_categories--list .block-top_categories__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 0;
}

.block-top_categories--list .block-top_categories__col {
  position: relative;
  /* Две зоны: миниатюра и тело. Счётчик лежит ВНУТРИ тела (разметка общая с
     плиткой), поэтому третью колонку строит уже тело — см. ниже. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;

  min-height: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.block-top_categories--list .block-top_categories__col:hover {
  border-color: var(--color-hairline);
}
/* Последняя строка каждой колонки без разделителя: их две, поэтому :last-child
   недостаточно — считаем от конца по два. */
.block-top_categories--list .block-top_categories__col:nth-last-child(-n+2) {
  border-bottom: 0;
}

/* Миниатюра квадратная: в строке она работает опознавательным знаком, а не
   витриной, и кадры разделов как раз квадратные (300×300 … 1280×1280). */
.block-top_categories--list .block-top_categories__image {
  position: static;
  order: -1;
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: var(--radius-md, 10px);
}

/* Тело — сетка «текст | счётчик»: название и породы слева, число справа по центру
   строки. Через grid-areas, а не flex: при отсутствии пород (у «Красок и масел»)
   пустая область схлопывается сама, и счётчик остаётся на месте. */
.block-top_categories--list .block-top_categories__body {
  order: 0;
  min-width: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title count"
    "materials count";
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
}
.block-top_categories--list .block-top_categories__title { grid-area: title; }
.block-top_categories--list .block-top_categories__materials { grid-area: materials; }
.block-top_categories--list .block-top_categories__foot { grid-area: count; }
.block-top_categories--list .block-top_categories__title {
  width: 100%;               /* normalize.css:195 задаёт ссылкам max-content */
  font-size: var(--fs-17, 1.0625rem);
  line-height: var(--leading-tight);
  text-decoration: none;
}
.block-top_categories--list .block-top_categories__title::after {
  content: '';
  position: absolute;
  inset: 0;                  /* кликабельна вся строка */
}
.block-top_categories__materials {
  font-size: var(--fs-14);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ═══ Микро-теги в плитке (макет B, выбор владельца 2026-08-10) ═══════════════
   Третий заход по одной и той же просьбе — «сделай видно, что сюда можно нажать».
   Первый вид (породы серым текстом через « · », подкатегории списком) кликабельным
   не выглядел вовсе; второй (чипы-пилюли 30px с контуром) выглядел, но не влезал
   в строку: у «Крепежа» шесть чипов вставали в пять рядов, карточка выросла с 336
   до 460px, а у карточек с двумя породами внизу зияла пустота. Макет с четырьмя
   заменами — https://claude.ai/code/artifact/a25109db-48e4-4f74-b7d6-d14debb0024e

   Правило теперь одно и жёсткое: строка ровно одна. Тег ниже и легче чипа (26px
   против 30, без контура, заливка --color-field), в строку кладём два, остальное
   уходит в счётчик «+N» со ссылкой на раздел. Контур снят намеренно: у пилюли с
   рамкой вес кнопки, а этих «кнопок» в карточке до шести — рябило именно от рамок.
   Текст акцентный: без контура цвет остаётся единственным признаком ссылки. */
/* Симметрия ряда (просьба владельца 2026-08-10): полоса тегов и подвал стоят на
   одной высоте во всех карточках, как бы ни отличались заголовки — «Планкен» в одну
   строку и «Террасная и палубная доска» в три. Свободное место уходит наверх, между
   заголовком и тегами, а не в дыру над подвалом, откуда оно бросалось в глаза.
   Раньше «вниз» прижимался только подвал, и линия тегов гуляла по ряду. */
.block-top_categories__tags {
  margin-top: auto;
}
/* Два auto-отступа подряд поделили бы свободное место пополам и снова развели
   теги с подвалом, поэтому у подвала он снимается — но только там, где теги есть. */
.block-top_categories__col:has(.block-top_categories__tags) .block-top_categories__foot {
  margin-top: 0;
}
.block-top_categories__tags {
  display: flex;
  /* nowrap + overflow — страховка от переноса: лишние теги в разметке уже отрезаны
     (index.twig, slice), но длинная пара вроде «Берёза» + «Ламинированная фанера»
     иначе уронила бы вторую строку обратно. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.block-top_categories__tag,
.block-top_categories__rest {
  /* ⚠️ Обязательно. Заголовок карточки растянут псевдоэлементом на всю плитку
     (см. __title::after ниже) — без своего слоя тег не кликается вовсе:
     тап уходит в заголовок и ведёт в раздел целиком. */
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--color-field);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  color: var(--color-accent-strong);
  text-decoration: none;
  /* normalize.css:195 задаёт ссылкам max-content — в flex-строке это распирает
     ряд и не даёт длинному тегу ужаться (DOMAIN_MAP §12). */
  width: auto;
  min-width: 0;
  /* Длинное название («Капролон стеклоармированный ПА6») сжимается многоточием,
     а не выталкивает соседа из строки. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .15s ease, color .15s ease;
}
.block-top_categories__tag:hover,
.block-top_categories__tag:focus-visible,
.block-top_categories__rest:hover,
.block-top_categories__rest:focus-visible {
  background-color: var(--color-surface-sunken);
  color: var(--color-accent-strong);
  text-decoration: none;
}
/* «+N» — не тег, а подпись: он не ведёт в срез, а открывает раздел целиком.
   Поэтому без заливки и приглушённым цветом. */
.block-top_categories__rest {
  flex: none;
  padding: 3px 2px;
  background: none;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
.block-top_categories__rest:hover,
.block-top_categories__rest:focus-visible {
  background: none;
  color: var(--color-accent-strong);
}
/* Счётчиков в разметке два: на десктопе в строке два тега, на телефоне один —
   и «+N» у них разный. Считать в шаблоне дважды дешевле, чем гадать в JS. */
.block-top_categories__rest--phone {
  display: none;
}

/* ⚠️ Мобильные размеры тега стоят здесь, а не в общем медиазапросе выше по файлу:
   селекторы одной специфичности, и тот, что выше, молча проигрывал бы базовому
   правилу — на прошлом заходе так и вышло (замер: 30px и 13px вместо 32/12). */
@media screen and (max-width: 768px) {
  /* Карточка на телефоне 171px — на два тега места нет. Остаётся первый (самая
     ходовая порода: список отсортирован по числу позиций) и счётчик.
     24px — минимум WCAG 2.2 по тач-цели (2.5.8 AA); до 44px (2.5.5 AAA) здесь не
     дотянуться, не подняв карточку на треть, а весь ряд тянется по самой высокой. */
  .block-top_categories__tags {
    gap: 4px;
    /* ⚠️ auto, а не 2px: правило стоит ниже базового и перебивает его. С 2px теги
       переставали прижиматься к низу, и на телефоне линия тегов снова гуляла по
       ряду вслед за длиной заголовка (замер: 157 / 174 / 191px от верха карточки).
       Отступ от заголовка даёт row-gap тела. */
    margin-top: auto;
  }
  .block-top_categories__tag,
  .block-top_categories__rest {
    min-height: 24px;
    padding: 2px 8px;
    font-size: 0.75rem;
  }
  .block-top_categories__tag--second,
  .block-top_categories__rest--desktop {
    display: none;
  }
  .block-top_categories__rest--phone {
    display: inline-flex;
    justify-content: center;
    /* «+2» — такая же ссылка, как теги пород, но из двух знаков: без min-width её цель
       касания выходила 18px, меньше минимума в 24px. */
    min-width: 24px;
    padding: 2px;
  }
}
/* «Смотреть» в списке не нужен: его роль забрала сама строка-ссылка. Подкатегорий
   здесь нет вовсе — теги рисуются только в плитке (условие в index.twig). */
.block-top_categories--list .block-top_categories__more {
  display: none;
}
.block-top_categories--list .block-top_categories__foot {
  margin: 0;
  padding: 0;
  border: 0;
  justify-content: flex-end;
}
.block-top_categories--list .block-top_categories__count {
  font-size: var(--fs-14);
  white-space: nowrap;
}

@media screen and (max-width: 991px) {
  /* Одна колонка: на планшете две дают строку в 330px, и породы обрезаются. */
  .block-top_categories--list .block-top_categories__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .block-top_categories--list .block-top_categories__col:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--color-hairline);
  }
  .block-top_categories--list .block-top_categories__col:last-child {
    border-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .block-top_categories--list .block-top_categories__col {
    column-gap: 12px;
    padding: 10px 0;
    min-height: 76px;        /* тач-цель с запасом к норме 44px */
  }
  .block-top_categories--list .block-top_categories__image {
    width: 56px;
    height: 56px;
  }
  .block-top_categories--list .block-top_categories__title {
    font-size: var(--fs-15);
  }
  /* ⚠️ Правило только для списка. Селектор был общим и доставал до плитки, где
     та же строка теперь набрана чипами: nowrap с ellipsis на их контейнере —
     мина, которая сработала бы при первом же переносе ряда. */
  .block-top_categories--list .block-top_categories__materials {
    font-size: var(--fs-13);
    /* На узком экране породы в одну строку: перенос ломал ритм списка, а
       обрезанный хвост читается как «и другие». */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .block-top_categories--list .block-top_categories__count {
    font-size: var(--fs-13);
  }
}

/* /catalog/view/theme/LESPROM/template/_blocks/catalog/all_sections/style.css */
/* LPD-16 (5/5) Блок «Все разделы» на хабе /katalog/ */
.all-sections {
  margin-top: 48px;
}

.all-sections__title {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--primary-color);
}

.all-sections__root {
  margin-bottom: 28px;
}

.all-sections__root-link {
  --link-color: var(--color-accent);
  font-weight: var(--fw-semibold);
}

.all-sections__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px 24px;
}

.all-sections__group-title {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  color: var(--primary-color);
}

/* заголовок-ссылка (node-колонка) визуально равен некликабельному заголовку группы,
   поэтому кликабельность подсказываем на hover/focus */
.all-sections__group-title--link {
  --link-color: var(--primary-color);
}

.all-sections__group-title--link:hover,
.all-sections__group-title--link:focus-visible {
  --link-color: var(--color-accent);
  text-decoration: underline;
}

.all-sections__list {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.all-sections__item {
  margin: 0;
  padding: 0;
}

.all-sections__item::before {
  content: none;
}

/* тап-цель ≥44px по высоте строки списка (WCAG 2.5.5) */
.all-sections__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: .94rem;
  line-height: var(--leading-snug);
}

@media screen and (max-width: 768px) {
  .all-sections {
    margin-top: 32px;
  }

  .all-sections__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}