/* Корень каталога gappo-russia (Q-058, А2): плитки разделов первого уровня. Цвета и начертания — по Дизайнеру (Q-074 п. 7,
   design/gappo-russia/sverka-shrift-mozaika-2026-10-26.md): как заголовки колонок подвала и подписи мозаики на тёмном фоне. */
.gu-sections { padding-top: 30px; padding-bottom: 60px; }
.gu-sections__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.gu-sections__item { min-width: 0; }
.gu-sections__head { display: flex; flex-direction: column; gap: 8px; color: #fff; text-decoration: none; }
.gu-sections__head:hover .gu-sections__name, .gu-sections__head:focus-visible .gu-sections__name { color: #0bafe6; }
.gu-sections__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #f5f7f8; overflow: hidden; } /* п. 13: фон картинок — как у фото товаров (Дизайнер) */
.gu-sections__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gu-sections__name { font-size: 20px; font-weight: 300; line-height: 1.3; text-transform: uppercase; color: #fff; overflow-wrap: normal; hyphens: manual; }
.gu-sections__count { font-size: 13px; color: #808080; }
.gu-sections__list { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
/* К1: у ссылок подразделов свой класс — иначе правило сайта a:not([class]) (белые с подчёркиванием) перебивало */
.gu-sections__list .gu-sections__link { color: #bfbfbf; font-weight: 400; text-decoration: none; overflow-wrap: break-word; hyphens: auto; }
.gu-sections__list .gu-sections__link:hover, .gu-sections__list .gu-sections__link:focus-visible { color: #0bafe6; text-decoration: underline; }
@media (max-width: 1199px) { .gu-sections__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .gu-sections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .gu-sections__name { font-size: 15px; } } /* п. 13: «КОМПЛЕКТУЮЩИЕ» в колонку 2×N на 375 без разрыва */
@media (max-width: 374px) { .gu-sections__grid { grid-template-columns: minmax(0, 1fr); } }