itube-specs 0.0.923 → 0.0.928

package/DOCS/STYLES.md

@@ -120,8 +120,17 @@ Text-only elements (`title`, `name`, `subtext`, `description`, `label`, `count`)
   `font-size`/`line-height`.
 - Breakpoints: `@include from-br(sm)`, `to-br(xs)`. Container: `from-cq($bp)`. JS mirror of `$brkpnts` in
   `config/`, guarded by `check:breakpoints`.
+- `$brkpnts` holds layout tiers only — points the whole page frame turns on, needed by many components. A
+  one-off threshold of a single block (how many columns fit, where a word wraps) stays a px literal next to
+  that block: `from-br`/`to-br` take a number too.
+- Card grids (videos, channels, playlists, categories) all key off `mixins/_cards-grid.scss` — one ladder
+  1 → 2 (370px) → 3 (900px) → 4 (1440px). Take columns from `@include cards-grid-columns`, set `display` and
+  `gap` yourself; don't hand-roll a per-grid column ladder or an `auto-fill` variant.
+- `$brkpnt-burger` (= `sd`, 1024px) is the burger ↔ desktop-menu line: below it the nav and the right half of
+  the header collapse into the burger. Header, nav, search, niche, language and `--header-height` key off this
+  variable, not off `sm` — move the line here, not per file. Utility classes: `._to-sd` / `._from-sd`.
 
 **All mixins** (auto-injected, never `@use`): `font-4xs|3xs|xs|2xs|sm|md|base|lg|xl|2xl|3xl|4xl`,
 `from-br|to-br`, `from-cq|to-cq`, `hover`, `surface`, `button-variant`, `page|page-title|page-footer-links`,
-`video-card|video-card-grid|video-card-poster`, `area-point`. Signatures — SCSS-mixins table in the app's
+`cards-grid-columns`, `video-card|video-card-grid|video-card-poster`, `area-point`. Signatures — SCSS-mixins table in the app's
 `DOCS/CATALOG.md`.

package/assets/scss/base/_utils.scss

@@ -6,6 +6,9 @@
 // Виден только ниже sm (960px), на sm и шире скрыт.
 @include from-br(sm) { ._to-sm { display: none !important; } }
 
+// Виден только ниже sd (1024px, граница бургера), на sd и шире скрыт.
+@include from-br(sd) { ._to-sd { display: none !important; } }
+
 // Виден только ниже md (1350px), на md и шире скрыт.
 @include from-br(md) { ._to-md { display: none !important; } }
 
@@ -18,6 +21,9 @@
 // Виден с sm (960px) и шире, ниже скрыт.
 @include to-br(sm) { ._from-sm { display: none !important; } }
 
+// Виден с sd (1024px, граница бургера) и шире, ниже скрыт.
+@include to-br(sd) { ._from-sd { display: none !important; } }
+
 // Виден с md (1350px) и шире, ниже скрыт.
 @include to-br(md) { ._from-md { display: none !important; } }
 

package/assets/scss/layout/_layout.scss

@@ -17,7 +17,7 @@
   padding-block: 12px;
   border-bottom: 1px solid $layout-header-border;
 
-  @include from-br(sm) {
+  @include from-br($brkpnt-burger) {
     padding-inline: 32px;
     padding-block: 12px;
   }

package/assets/scss/mixins/_badge.scss

@@ -0,0 +1,18 @@
+@use 'font-sizes' as *;
+@use 'vars' as *;
+
+// Плашка с кодом локали в переключателях языка (шапка, футер, список языков).
+// Цвета не задаёт — фон и текст ставит вызывающий компонент своими токенами.
+@mixin locale-badge {
+  @include font-xs;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: $radius-small;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}

package/assets/scss/mixins/_breakpoints.scss

@@ -1,19 +1,40 @@
 @use 'sass:map';
 @use 'sass:list';
+@use 'sass:math';
 @use 'sass:meta';
 
-// Брейкпоинты соответствуют брейкпоинтам vuetify https://v2.vuetifyjs.com/en/features/breakpoints/
+// Тиры раскладки. Сюда попадают только точки, вокруг которых перестраивается общий каркас
+// страницы, и потому нужные многим компонентам. Разовый порог одного блока (сколько колонок
+// влезло, где переносится слово) держим литералом рядом с этим блоком — from-br/to-br
+// принимают и число в px.
 
 $brkpnts: (
   xs: 475px,
   xm: 650px,
   sm: 960px,
+  sd: 1024px,
   md: 1350px,
   ml: 1500px,
   lg: 1792px,
   xl: 2560px,
 );
 
+/**
+  Граница «бургер ↔ десктопное меню»: ниже неё навигация и правая часть шапки свёрнуты
+  в бургер, выше — разложены в шапку и в строку навигации под ней. Отдельная переменная,
+  а не литерал `sd`, чтобы двигать эту границу, не перебирая шапку по файлам.
+ */
+$brkpnt-burger: sd;
+
+// Литерал-порог можно писать и как 370, и как 370px — приводим к px.
+@function _to-px($bp) {
+  @if math.is-unitless($bp) {
+    @return $bp * 1px;
+  }
+
+  @return $bp;
+}
+
 /**
   Mobile first брейкпоинты
   @include from-br(sm) { ... }
@@ -27,7 +48,7 @@ $brkpnts: (
       @content;
     }
   } @else if meta.type-of($bp) == 'number' {
-    $pixelyzed: $bp * 1px;
+    $pixelyzed: _to-px($bp);
 
     @media (min-width: $pixelyzed) {
       @content;
@@ -49,7 +70,7 @@ $brkpnts: (
       @content;
     }
   } @else if meta.type-of($bp) == 'number' {
-    $pixelyzed: $bp * 1px - 1px;
+    $pixelyzed: _to-px($bp) - 1px;
 
     @media (max-width: $pixelyzed) {
       @content;

package/assets/scss/mixins/_cards-grid.scss

@@ -0,0 +1,32 @@
+@use 'breakpoints' as *;
+
+/**
+  Пороги плотности сеток карточек — тумб, каналов, плейлистов, категорий. Это не тиры
+  раскладки, а ответ на вопрос «сколько карточек влезает по ширине», поэтому литералы,
+  а не ключи $brkpnts: 900px и 1440px намеренно не совпадают с sm/md и в общую карту не идут.
+ */
+$cards-grid-2-cols: 370px;
+$cards-grid-3-cols: 900px;
+$cards-grid-4-cols: 1440px;
+
+/**
+  Колонки сетки карточек: 1, 2 с 370px, 3 с 900px, 4 с 1440px. Только grid-template-columns —
+  `display` и `gap` остаются на вызывающей стороне, они у сеток разные.
+  minmax(0, 1fr) обязателен, не `1fr`: нешринкуемая мета-строка (карточка истории) задаёт
+  колонке min-content, из-за которого грид вылезает за контейнер на телефоне.
+ */
+@mixin cards-grid-columns {
+  grid-template-columns: minmax(0, 1fr);
+
+  @include from-br($cards-grid-2-cols) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include from-br($cards-grid-3-cols) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @include from-br($cards-grid-4-cols) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

package/assets/scss/mixins/_index.scss

@@ -1,7 +1,9 @@
 @forward 'font-sizes';
 @forward 'accessibility';
+@forward 'badge';
 @forward 'breakpoints';
 @forward 'button';
+@forward 'cards-grid';
 @forward 'page';
 @forward 'surface';
 @forward 'video-card';

package/assets/scss/mixins/_page.scss

@@ -13,11 +13,15 @@
 
 // Заголовок страницы: font-lg, uppercase, 700. В разметке — глобальный класс `._title`.
 @mixin page-title {
-  @include font-lg;
+  @include font-base;
 
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   font-weight: 700;
+
+  @include from-br(xm) {
+    @include font-lg;
+  }
 }
 
 // Блок SEO-ссылок внизу страницы: прижат к низу (margin-top: auto) и отбит линией.

package/assets/scss/mixins/_video-card.scss

@@ -1,4 +1,5 @@
 @use 'breakpoints' as *;
+@use 'cards-grid' as *;
 @use 'font-sizes' as *;
 @use 'vars' as *;
 
@@ -10,27 +11,16 @@
   align-content: start;
 }
 
-/**
-  Сетка карточек видео: 2 колонки, 3 с xs, 4 с md.
-  minmax(0, 1fr) обязателен, не `1fr`: мета-строка карточки истории нешринкуема и задаёт
-  колонке min-content, из-за которого грид вылезает за контейнер на телефоне.
- */
+// Сетка карточек видео: колонки общие для всех сеток карточек, свой только зазор.
 @mixin video-card-grid {
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
 
-  @include from-br(xs) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
+  @include cards-grid-columns;
 
   @include from-br(sm) {
     gap: 24px;
   }
-
-  @include from-br(md) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
 }
 
 // Постер карточки: 16/9, скруглённый, с обрезкой — база для абсолютных бейджей поверх.

package/assets/scss/themes/dark/_theme.scss

@@ -224,6 +224,15 @@ $video-card-action-active-icon--hover: $color-white;
 $video-card-dropdown-border: $color-zinc-800;
 $video-card-dropdown-size--hover: 1;
 
+// ─── Video card tags (ряд плашек моделей и поповер «ещё») ───
+$video-card-tags-more-bg: $color-zinc-800-80;
+$video-card-tags-more-bg--hover: $color-zinc-700;
+$video-card-tags-more-text: $color-zinc-300;
+$video-card-tags-more-text--hover: $color-white;
+$video-card-tags-popover-bg: $color-zinc-900;
+$video-card-tags-popover-border: $color-zinc-800;
+$video-card-tags-popover-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+
 // ─── Video info ───
 $video-info-item-text: $color-zinc-500-70;
 $video-info-handler-text: $color-zinc-400;
@@ -367,6 +376,8 @@ $language-icon: $color-zinc-400;
 $language--current: $color-zinc-500;
 $language-title: $color-zinc-500;
 $language-item-text: $color-zinc-300;
+$language-code-bg: $color-zinc-700;
+$language-code-text: $color-zinc-200;
 $language-item-bg--hover: $color-zinc-800;
 $language-item-text--current: $color-white;
 $language-item-bg--current: $color-zinc-700;
@@ -390,11 +401,12 @@ $niche-item-bg--current: $color-zinc-700;
 $footer-language-bg: $color-zinc-800-50;
 $footer-language-bg--hover: $color-zinc-700;
 $footer-language-text: $color-zinc-400;
-$footer-language-menu-bg: $color-zinc-800;
-$footer-language-menu-border: $color-zinc-700;
-$footer-language-item-text: $color-zinc-300;
-$footer-language-item-bg--active: $color-indigo-600-20;
-$footer-language-item-text--active: $color-indigo-400;
+$footer-language-badge-bg: $color-zinc-800;
+$footer-language-badge-text: $color-zinc-200;
+$footer-language-menu-bg: $color-night;
+$footer-language-menu-border: $color-zinc-800;
+$footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
+$footer-language-menu-item--hover: $color-zinc-800-50;
 
 // ─── Burger ───
 $burger-backdrop: $mono-black-50;
@@ -422,9 +434,12 @@ $header-bg: $color-black;
 $header-burger-icon: $color-zinc-200;
 $header-user-icon: $color-zinc-500;
 $header-language-trigger: $color-zinc-400;
-$header-language-angle--hover: $color-white;
+$header-language-trigger--hover: $color-white;
+$header-language-badge-bg: $color-zinc-800;
+$header-language-badge-text: $color-zinc-200;
 $header-language-menu-bg: $color-night;
 $header-language-menu-border: $color-zinc-800;
+$header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
 $header-language-menu-item--hover: $color-zinc-800-50;
 
 // ─── notifications ───
@@ -540,6 +555,10 @@ $swiper-nav-bg--hover: transparent;
 $swiper-nav-text: $color-white;
 $swiper-nav-shadow: transparent;
 
+// ─── Section swiper cards ───
+$section-swiper-cards-link: $color-zinc-400;
+$section-swiper-cards-link--hover: $color-white;
+
 // ─── Select ───
 $select-icon: $color-zinc-400;
 $select-bg: $color-zinc-800-60;

package/assets/scss/themes/light/_theme.scss

@@ -281,6 +281,15 @@ $video-card-action-active-icon--hover: $color-white;
 // ─── Video card dropdown ───
 $video-card-dropdown-border: transparent;
 
+// ─── Video card tags (ряд плашек моделей и поповер «ещё») ───
+$video-card-tags-more-bg: $color-gray-300;
+$video-card-tags-more-bg--hover: $color-gray-400;
+$video-card-tags-more-text: $color-gray-700;
+$video-card-tags-more-text--hover: $color-gray-900;
+$video-card-tags-popover-bg: $color-white;
+$video-card-tags-popover-border: $color-gray-300;
+$video-card-tags-popover-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+
 // ─── Video info ───
 $video-info-item-text: $color-gray-400;
 $video-info-handler-text: $color-gray-400;
@@ -424,6 +433,8 @@ $language-icon: $color-gray-400;
 $language--current: $color-gray-400;
 $language-title: $color-gray-400;
 $language-item-text: $color-gray-300;
+$language-code-bg: $color-slate-700;
+$language-code-text: $color-white;
 $language-item-bg--hover: $color-white-5;
 $language-item-text--current: $color-white;
 $language-item-bg--current: $color-slate-750;
@@ -447,11 +458,12 @@ $niche-item-bg--current: $color-indigo-soft;
 $footer-language-bg: $color-slate-750;
 $footer-language-bg--hover: $color-slate-700;
 $footer-language-text: $color-white;
-$footer-language-menu-bg: $color-slate-750;
-$footer-language-menu-border: $color-slate-700;
-$footer-language-item-text: $color-gray-300;
-$footer-language-item-bg--active: $color-indigo-soft;
-$footer-language-item-text--active: $color-white;
+$footer-language-badge-bg: $color-slate-850;
+$footer-language-badge-text: $color-white;
+$footer-language-menu-bg: $color-slate-850;
+$footer-language-menu-border: $color-white-10;
+$footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
+$footer-language-menu-item--hover: $color-white-5;
 
 // ─── Burger ───
 $burger-backdrop: $mono-black-50;
@@ -479,9 +491,12 @@ $header-bg: $color-slate-800;
 $header-burger-icon: $color-gray-200;
 $header-user-icon: $color-gray-500;
 $header-language-trigger: $color-gray-500;
-$header-language-angle--hover: $color-gray-300;
+$header-language-trigger--hover: $color-gray-300;
+$header-language-badge-bg: $color-slate-750;
+$header-language-badge-text: $color-white;
 $header-language-menu-bg: $color-slate-850;
 $header-language-menu-border: $color-white-10;
+$header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
 $header-language-menu-item--hover: $color-white-5;
 $notifications-icon: $color-gray-300;
 $notifications-icon--mobile: $color-gray-200;
@@ -591,6 +606,10 @@ $swiper-nav-bg: $color-white;
 $swiper-nav-bg--hover: $color-gray-300;
 $swiper-nav-shadow: $mono-black-10;
 
+// ─── Section swiper cards ───
+$section-swiper-cards-link: $color-gray-600;
+$section-swiper-cards-link--hover: $color-gray-900;
+
 // ─── Select ───
 $select-bg: $color-white;
 $select-icon: $color-gray-500;

package/assets/scss/vars/_tokens.scss

@@ -38,9 +38,13 @@
     --container-padding-inline: 24px;
     --chips-height: 32px;
     --chips-height-small: 28px;
-    --header-height: 71px;
     --control-min-width: 296px;
     --max-width-container: 1600px;
     --card-round-size: 96px;
   }
+
+  // Высота шапки меняется вместе с её раскладкой, а не на общем тире sm.
+  @include from-br($brkpnt-burger) {
+    --header-height: 71px;
+  }
 }

package/components/card/video/index.vue

@@ -8,6 +8,7 @@
       {'--no-channel': isChannelPage},
       {'--progress': hasProgress},
       {'--favorite': isFavoriteCard},
+      {'--tags-open': isTagsOpen},
     ]"
     class="card-video"
   >
@@ -131,11 +132,15 @@
       </p>
       <div
         v-if="!mini && !compact && !history && cardTags && cardTags.length > 0"
+        ref="tagsRef"
         class="card-video__tags"
       >
-        <div class="card-video__tags-wrapper">
+        <div
+          class="card-video__tags-wrapper"
+          @click="isTagsOpen = false"
+        >
           <UiChips
-            v-for="(item, index) in cardTags?.slice(0, 4)"
+            v-for="(item, index) in cardTags"
             micro
             :key="`${card.guid}-tag-${index}`"
             :item="item"
@@ -143,6 +148,14 @@
             is-link
           />
         </div>
+        <button
+          v-if="hasMoreTags"
+          :aria-label="t('show_all_models')"
+          :aria-expanded="isTagsOpen"
+          class="card-video__tags-more"
+          type="button"
+          @click="isTagsOpen = !isTagsOpen"
+        >+</button>
       </div>
       <CardDropdownTrigger
         :card="card"
@@ -161,9 +174,13 @@
 
 <script setup lang="ts">
 import type { IVideoCard } from '../../../types';
+import { onClickOutside } from '@vueuse/core';
 import { convertString, getDuration } from '../../../runtime';
 import { CSS_BREAKPOINTS } from '../../../config/css-breakpoints';
 
+/** Потолок плашек в разметке: ряд скроллится, но неограниченный список раздувает DOM всей сетки */
+const TAGS_LIMIT = 8;
+
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const props = defineProps<{
@@ -280,7 +297,16 @@ const cardTags = computed(() => {
       searchRank(a) - searchRank(b) || a.localeCompare(b)
   );
 
-  return sortModels?.map(item => convertString().toChips(item, 'models'));
+  return sortModels.slice(0, TAGS_LIMIT).map(item => convertString().toChips(item, 'models'));
+});
+
+const tagsRef = ref();
+const isTagsOpen = ref(false);
+
+const hasMoreTags = computed(() => cardTags.value.length > 1);
+
+onClickOutside(tagsRef, () => {
+  isTagsOpen.value = false;
 });
 </script>
 
@@ -288,6 +314,7 @@ const cardTags = computed(() => {
 $inset-label: 8px;
 $layout-breakpoint: 250px;
 $progress-height: 4px;
+$tags-fade: 40px;
 
 // Колонка под меню карточки фиксирована, а не auto: иначе ширина зависит от того, отрисовано меню
 // или нет, и в момент подмены кнопки заголовок дёргается
@@ -590,10 +617,36 @@ $dropdown-column: 18px;
   aspect-ratio: 16/9;
 }
 
+@property --card-video-tags-fade {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+/* Затемнение гаснет на последних 15% прокрутки — доехал до конца, подсказывать больше нечего */
+@keyframes card-video-tags-fade {
+  0%,
+  85% {
+    --card-video-tags-fade: #{$tags-fade};
+  }
+
+  100% {
+    --card-video-tags-fade: 0px;
+  }
+}
+
+@keyframes card-video-tags-more {
+  0%,
+  100% {
+    visibility: visible;
+  }
+}
+
 .card-video__tags {
-  align-items: center;
-  gap: 8px;
+  position: relative;
   grid-column: 1;
+  min-height: var(--chips-height-micro);
+  timeline-scope: --card-video-tags;
 
   @include from-cq($layout-breakpoint) {
     grid-column: 2;
@@ -602,11 +655,87 @@ $dropdown-column: 18px;
 }
 
 .card-video__tags-wrapper {
-  max-height: calc( var(--chips-height-micro) * 2 + 8px);
-  overflow: hidden;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  align-items: center;
   gap: 8px;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.card-video__tags-more {
+  @include font-xs;
+
+  position: absolute;
+  inset-block: 0;
+  right: 0;
+  z-index: $z-index-dropdown;
+  display: grid;
+  place-content: center;
+  padding-inline: 8px;
+  visibility: hidden;
+  color: $video-card-tags-more-text;
+  background-color: $video-card-tags-more-bg;
+  border-radius: $radius-6;
+
+  @include hover(background-color, color) {
+    background-color: $video-card-tags-more-bg--hover;
+    color: $video-card-tags-more-text--hover;
+  }
+
+  @include to-br(sm) {
+    display: none;
+  }
+}
+
+/* Влезли плашки в ряд или нет, решает сам браузер: у непрокручиваемого контейнера scroll-таймлайн
+   неактивен, анимации не применяются — ни затемнения, ни кнопки. Без замеров и без JS, то есть
+   ещё до гидрации. Где scroll() не поддержан — ряд просто обрезается по краю. */
+@supports (animation-timeline: scroll()) {
+  .card-video__tags-wrapper {
+    scroll-timeline: --card-video-tags inline;
+    animation: card-video-tags-fade linear both;
+    animation-timeline: --card-video-tags;
+    mask-image: linear-gradient(to right, currentcolor calc(100% - var(--card-video-tags-fade)), transparent);
+  }
+
+  .card-video__tags-more {
+    animation: card-video-tags-more linear both;
+    animation-timeline: --card-video-tags;
+  }
+}
+
+/* Раскрытый список — тот же DOM: ряд перестаёт быть скроллом и разворачивается поповером поверх */
+.--tags-open .card-video__tags-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-dropdown;
+  flex-wrap: wrap;
+  width: max-content;
+  max-width: 100%;
+  padding: 8px $tags-fade 8px 8px;
+  overflow: visible;
+  background-color: $video-card-tags-popover-bg;
+  border: 1px solid $video-card-tags-popover-border;
+  border-radius: $radius-md;
+  box-shadow: $video-card-tags-popover-shadow;
+  mask-image: none;
+}
+
+.--tags-open .card-video__tags-more {
+  visibility: visible;
+}
+
+/* Карточка — свой контекст наложения из-за container-type, поповер иначе уйдёт под соседнюю */
+.card-video.--tags-open {
+  z-index: $z-index-dropdown;
 }
 
 .card-video__user {

package/components/grid/categories.vue

@@ -1,4 +1,4 @@
-<!-- Адаптивная сетка карточек категорий (auto-fill) -->
+<!-- Сетка карточек категорий, 1-4 колонки -->
 <template>
   <div class="grid-categories">
     <CardCategory
@@ -22,15 +22,12 @@ defineProps<{
 
 <style lang="scss">
 .grid-categories {
-  --min-width: 150px;
-
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
 
-  @include from-br(sm) {
-    --min-width: 250px;
+  @include cards-grid-columns;
 
+  @include from-br(sm) {
     gap: 16px;
   }
 }

package/components/grid/channels.vue

@@ -1,4 +1,4 @@
-<!-- Сетка карточек каналов, 2-4 колонки -->
+<!-- Сетка карточек каналов, 1-4 колонки -->
 <template>
   <div
     id="anchor"
@@ -28,16 +28,6 @@ defineProps<{
   display: grid;
   gap: 24px;
 
-  @include from-br(xs) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @include from-br(sm) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @include from-br(md) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  @include cards-grid-columns;
 }
 </style>

package/components/grid/playlists.vue

@@ -1,4 +1,4 @@
-<!-- Сетка карточек плейлистов, 2-4 колонки; попап шаринга — один на список -->
+<!-- Сетка карточек плейлистов, 1-4 колонки; попап шаринга — один на список -->
 <template>
   <div class="grid-playlists">
     <CardPlaylist
@@ -64,12 +64,6 @@ function onShare(card: IPlaylistCard) {
   display: grid;
   gap: 24px;
 
-  @include from-br(xs) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @include from-br(sm) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  @include cards-grid-columns;
 }
 </style>