/* ==========================================================================
QME — единая раскладка фотоблоков.
Подключается в layouts/app.blade.php ПОСЛЕ @stack('head'), то есть позже
всех пакетных CSS (qme-gamepage, qme-unique, qme-wave3-*, wave3-claude1,
home.css). Поэтому при равной специфичности выигрывают правила отсюда —
переписывать шесть пакетных файлов не нужно.
Задача владельца 10.09.2026: на мобилке фотографии идут сеткой 2x2,
а не столбиком по одной. Если фотографий нечётное число, последняя строка
осталась бы с дырой — поэтому предпоследняя ячейка (она всегда в правой
колонке) растягивается на две строки и занимает освободившийся слот.
СОЗНАТЕЛЬНОЕ РАСХОЖДЕНИЕ С ОРИГИНАЛОМ. На quiz-mafia-event.ru эти блоки
размечены bootstrap-классами `col-12 col-sm-4`, то есть ниже 576px дают
ровно один столбик — то, что владелец и просил убрать. Раскладка ≥576px
не трогается и остаётся как в оригинале.
Селектор нечётности: `:nth-child(even):nth-last-child(2)` — предпоследний
элемент, стоящий на чётной позиции. Такое совпадение возможно только при
нечётном общем количестве (3, 5, 7, ...), при чётном правило не сработает.
ИСКЛЮЧЕНИЕ: /standup. По прямому указанию владельца 10.09.2026 разметка
картинок этой страницы возвращена к оригиналу: там `col-12 col-sm-4`, то
есть ниже 576px одно фото на строку во всю ширину и без обрезки. Пакет
chatgpt1 общий на шесть страниц, поэтому исключён только namespace
`.qm-standup` — остальные пять остаются в общей сетке 2x2.
========================================================================== */
/* --------------------------------------------------------------------------
1. Мобильная сетка 2x2 для всех фотоблоков (< 576px)
-------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
/* --- 1.1. Контейнеры: две колонки без гаттеров --- */
.qm-gallery__triple,
.qm-gamepage__gallery-grid,
.qm-aishow .qm-aishow-photos,
.qm-comedyshow .qm-comedyshow-photos,
.qm-fokusniki .qm-fokusniki-photos,
.qm-muzukaliti .qm-muzukaliti-photos,
.qm-nazad90 .qm-nazad90-photos,
.qm-neigry__gallery-grid,
.qm-gromkiy__gallery-grid,
.qm-bitvapolov__gallery-grid,
.qm-nashchupal__gallery-grid,
.qm-podmoskovnye__gallery-grid,
.qm-whatashow__gallery-grid,
.qm-karaoke-gallery__grid,
.qm-kalyan-gallery__grid,
.qm-vyezdnoybar-gallery__grid,
.qm-gogo-gallery__grid,
.qm-vinokazino-gallery__grid,
.qm-fankazino-gallery__grid,
.qm-sigarnoe-gallery__grid,
.qm-kubinskaya-gallery__grid,
.qm-russkiy-gallery__grid,
.qm-feb23-gallery__grid,
.qm-mart8-gallery__grid,
.qm-newyear-gallery__grid,
.qm-report-photos__grid,
.qm-hostdj-dj__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
/* Пакетные правила задают ширину ячеек во flex-процентах
(`flex: 0 0 100%` / `max-width: 100%`). В grid они мешают — снимаем. */
.qm-gallery__triple > .qm-gallery__cell,
.qm-gamepage__gallery-grid > .qm-gamepage__gcell,
.qm-neigry__gallery-grid > .qm-neigry__gcell,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell,
.qm-whatashow__gallery-grid > .qm-whatashow__gcell {
flex: none;
width: auto;
max-width: none;
}
/* --- 1.2. Пропорция ячейки. Внутри одного пакета она общая, иначе
строки в сетке разъедутся и растянутая ячейка не совпадёт с парой. --- */
.qm-aishow .qm-aishow-photos > .qm-aishow-photo-link,
.qm-comedyshow .qm-comedyshow-photos > .qm-comedyshow-photo-link,
.qm-fokusniki .qm-fokusniki-photos > .qm-fokusniki-photo-link,
.qm-muzukaliti .qm-muzukaliti-photos > .qm-muzukaliti-photo-link,
.qm-nazad90 .qm-nazad90-photos > .qm-nazad90-photo-link {
aspect-ratio: 3 / 2;
}
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell,
.qm-sigarnoe-gallery__grid > .qm-sigarnoe-gallery__cell,
.qm-kubinskaya-gallery__grid > .qm-kubinskaya-gallery__cell,
.qm-russkiy-gallery__grid > .qm-russkiy-gallery__cell,
.qm-feb23-gallery__grid > .qm-feb23-gallery__cell,
.qm-mart8-gallery__grid > .qm-mart8-gallery__cell,
.qm-newyear-gallery__grid > .qm-newyear-gallery__cell {
aspect-ratio: 3 / 2;
}
/* --- 1.3. Нечётное количество: предпоследняя ячейка занимает 4-й слот --- */
.qm-gallery__triple > .qm-gallery__cell:nth-child(even):nth-last-child(2),
.qm-gamepage__gallery-grid > .qm-gamepage__gcell:nth-child(even):nth-last-child(2),
.qm-aishow .qm-aishow-photos > .qm-aishow-photo-link:nth-child(even):nth-last-child(2),
.qm-comedyshow .qm-comedyshow-photos > .qm-comedyshow-photo-link:nth-child(even):nth-last-child(2),
.qm-fokusniki .qm-fokusniki-photos > .qm-fokusniki-photo-link:nth-child(even):nth-last-child(2),
.qm-muzukaliti .qm-muzukaliti-photos > .qm-muzukaliti-photo-link:nth-child(even):nth-last-child(2),
.qm-nazad90 .qm-nazad90-photos > .qm-nazad90-photo-link:nth-child(even):nth-last-child(2),
.qm-neigry__gallery-grid > .qm-neigry__gcell:nth-child(even):nth-last-child(2),
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell:nth-child(even):nth-last-child(2),
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell:nth-child(even):nth-last-child(2),
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell:nth-child(even):nth-last-child(2),
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell:nth-child(even):nth-last-child(2),
.qm-whatashow__gallery-grid > .qm-whatashow__gcell:nth-child(even):nth-last-child(2),
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell:nth-child(even):nth-last-child(2),
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell:nth-child(even):nth-last-child(2),
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell:nth-child(even):nth-last-child(2),
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell:nth-child(even):nth-last-child(2),
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell:nth-child(even):nth-last-child(2),
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell:nth-child(even):nth-last-child(2),
.qm-sigarnoe-gallery__grid > .qm-sigarnoe-gallery__cell:nth-child(even):nth-last-child(2),
.qm-kubinskaya-gallery__grid > .qm-kubinskaya-gallery__cell:nth-child(even):nth-last-child(2),
.qm-russkiy-gallery__grid > .qm-russkiy-gallery__cell:nth-child(even):nth-last-child(2),
.qm-feb23-gallery__grid > .qm-feb23-gallery__cell:nth-child(even):nth-last-child(2),
.qm-mart8-gallery__grid > .qm-mart8-gallery__cell:nth-child(even):nth-last-child(2),
.qm-newyear-gallery__grid > .qm-newyear-gallery__cell:nth-child(even):nth-last-child(2),
.qm-report-photos__grid > .qm-report-photos__item:nth-child(even):nth-last-child(2),
.qm-hostdj-dj__grid > .qm-hostdj-dj__cell:nth-child(even):nth-last-child(2) {
grid-row: span 2;
aspect-ratio: auto;
height: 100%;
}
/* Картинка внутри растянутой ячейки должна заполнить обе строки.
У cursor1/cursor2 и unique у ![]()
своя пропорция и height:auto —
без этого сброса снизу останется та же дыра, только внутри ячейки. */
.qm-gallery__triple > .qm-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-gamepage__gallery-grid > .qm-gamepage__gcell:nth-child(even):nth-last-child(2) img,
.qm-aishow .qm-aishow-photos > .qm-aishow-photo-link:nth-child(even):nth-last-child(2) img,
.qm-comedyshow .qm-comedyshow-photos > .qm-comedyshow-photo-link:nth-child(even):nth-last-child(2) img,
.qm-fokusniki .qm-fokusniki-photos > .qm-fokusniki-photo-link:nth-child(even):nth-last-child(2) img,
.qm-muzukaliti .qm-muzukaliti-photos > .qm-muzukaliti-photo-link:nth-child(even):nth-last-child(2) img,
.qm-nazad90 .qm-nazad90-photos > .qm-nazad90-photo-link:nth-child(even):nth-last-child(2) img,
.qm-neigry__gallery-grid > .qm-neigry__gcell:nth-child(even):nth-last-child(2) img,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell:nth-child(even):nth-last-child(2) img,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell:nth-child(even):nth-last-child(2) img,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell:nth-child(even):nth-last-child(2) img,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell:nth-child(even):nth-last-child(2) img,
.qm-whatashow__gallery-grid > .qm-whatashow__gcell:nth-child(even):nth-last-child(2) img,
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-sigarnoe-gallery__grid > .qm-sigarnoe-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-kubinskaya-gallery__grid > .qm-kubinskaya-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-russkiy-gallery__grid > .qm-russkiy-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-feb23-gallery__grid > .qm-feb23-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-mart8-gallery__grid > .qm-mart8-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-newyear-gallery__grid > .qm-newyear-gallery__cell:nth-child(even):nth-last-child(2) img,
.qm-report-photos__grid > .qm-report-photos__item:nth-child(even):nth-last-child(2) img,
.qm-hostdj-dj__grid > .qm-hostdj-dj__cell:nth-child(even):nth-last-child(2) img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
/* --- 1.4. Повышенная специфичность для пакета cursor2.
Там правила вида `.qm-feb23-gallery--3 .qm-feb23-gallery__grid
{ grid-template-columns: 1fr }` лежат ВНЕ медиазапроса и весят (0,2,0),
то есть перебивают п.1.1 (0,1,0) независимо от порядка в каскаде.
Проверено в браузере: без этих строк /korporativ-23-fevralya на 375px
остаётся в одну колонку, а растянутая ячейка схлопывается в 0. --- */
.qm-sigarnoe-gallery--3 .qm-sigarnoe-gallery__grid,
.qm-sigarnoe-gallery--4 .qm-sigarnoe-gallery__grid,
.qm-kubinskaya-gallery--3 .qm-kubinskaya-gallery__grid,
.qm-kubinskaya-gallery--4 .qm-kubinskaya-gallery__grid,
.qm-russkiy-gallery--3 .qm-russkiy-gallery__grid,
.qm-russkiy-gallery--4 .qm-russkiy-gallery__grid,
.qm-feb23-gallery--3 .qm-feb23-gallery__grid,
.qm-feb23-gallery--4 .qm-feb23-gallery__grid,
.qm-mart8-gallery--3 .qm-mart8-gallery__grid,
.qm-mart8-gallery--4 .qm-mart8-gallery__grid,
.qm-newyear-gallery--3 .qm-newyear-gallery__grid,
.qm-newyear-gallery--4 .qm-newyear-gallery__grid {
grid-template-columns: 1fr 1fr;
}
}
/* --------------------------------------------------------------------------
2. Мозаики «одно высокое + два половинных» на мобилке (< 768px)
Свою вложенную структуру они держат отдельными контейнерами, поэтому
правило нечётности из п.1 к ним не применимо — раскладываем явно.
-------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
/* 2.1. Главная: .qm-gallery__mosaic > .qm-gallery__stack + .qm-gallery__tall */
.qm-gallery__mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
flex-wrap: nowrap;
}
.qm-gallery__mosaic > .qm-gallery__stack {
grid-column: 1;
grid-row: 1;
width: auto;
max-width: none;
display: flex;
flex-direction: column;
}
.qm-gallery__mosaic > .qm-gallery__tall {
grid-column: 2;
grid-row: 1;
width: auto;
max-width: none;
display: flex;
}
.qm-gallery__mosaic > .qm-gallery__tall > .qm-gallery__cell--tall {
aspect-ratio: auto;
width: 100%;
height: 100%;
}
/* 2.2. Игровые страницы: .qm-gamepage__mosaic > .gcell--tall + .mosaic-stack.
Высокое фото уводим в правую колонку — одинаково со всеми
остальными блоками сайта на мобилке. */
.qm-gamepage__mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.qm-gamepage__mosaic > .qm-gamepage__mosaic-stack {
grid-column: 1;
grid-row: 1;
width: auto;
max-width: none;
}
.qm-gamepage__mosaic > .qm-gamepage__gcell--tall {
grid-column: 2;
grid-row: 1;
aspect-ratio: auto;
width: auto;
max-width: none;
height: 100%;
}
/* 2.3. cursor1 --mosaic отдельного правила на мобилке не требует: все три
ячейки лежат в одном контейнере, и общее правило п.1.3 (нечётное число →
предпоследняя ячейка на две строки) даёт ровно нужный результат — два фото
слева, одно высокое справа. Своё правило на :first-child здесь стояло и
конфликтовало с п.1.3: обе ячейки разом пытались занять две строки, блок
схлопывался в нулевую высоту (проверено в браузере на 375px). */
}
/* --------------------------------------------------------------------------
3. Десктоп: дыра в мозаике cursor1 (правка по скриншоту /vyezdnoj-bar).
Сетка 2x2 с `grid-row: 1 / span 2` у первой ячейки уже была, но ![]()
внутри держал `height: auto; aspect-ratio: 3/2` — картинка занимала
только верхнюю половину, нижняя оставалась чёрной.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.qm-karaoke-gallery--mosaic .qm-karaoke-gallery__cell:first-child,
.qm-kalyan-gallery--mosaic .qm-kalyan-gallery__cell:first-child,
.qm-vyezdnoybar-gallery--mosaic .qm-vyezdnoybar-gallery__cell:first-child,
.qm-gogo-gallery--mosaic .qm-gogo-gallery__cell:first-child,
.qm-vinokazino-gallery--mosaic .qm-vinokazino-gallery__cell:first-child,
.qm-fankazino-gallery--mosaic .qm-fankazino-gallery__cell:first-child {
height: 100%;
}
.qm-karaoke-gallery--mosaic .qm-karaoke-gallery__cell:first-child img,
.qm-kalyan-gallery--mosaic .qm-kalyan-gallery__cell:first-child img,
.qm-vyezdnoybar-gallery--mosaic .qm-vyezdnoybar-gallery__cell:first-child img,
.qm-gogo-gallery--mosaic .qm-gogo-gallery__cell:first-child img,
.qm-vinokazino-gallery--mosaic .qm-vinokazino-gallery__cell:first-child img,
.qm-fankazino-gallery--mosaic .qm-fankazino-gallery__cell:first-child img {
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
}
/* --------------------------------------------------------------------------
4. Ячейка не может быть шире своей колонки — правка по скриншоту владельца
10.09.2026 (/go-go-tequila-girls, 430px: нижнее левое фото наезжало на
правое). Механика: у ячейки есть aspect-ratio (п.1.2), по высоте она
растянута рядом сетки (align-items:stretch), а ширина при auto
вычисляется ИЗ ПРОПОРЦИИ — height*1.5, а не из ширины колонки. Высоту
ряда задаёт растянутая ячейка (п.1.3): её ![]()
с height:100% в ряду
auto-высоты даёт циклическую зависимость, и браузер берёт натуральную
высоту картинки. Портрет 1300x1809 дал ряд 149.7px вместо 143.5 — и
левые ячейки раздулись до 224.6px при колонке 215.2px, перекрыв соседа
на 10-27px. Замерено в браузере.
Фиксируем ширину по колонке: при заданных обеих осях aspect-ratio
перестаёт влиять на ширину, лишнее по высоте добирает object-fit:cover.
-------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
.qm-gallery__triple > .qm-gallery__cell,
.qm-gamepage__gallery-grid > .qm-gamepage__gcell,
.qm-aishow .qm-aishow-photos > .qm-aishow-photo-link,
.qm-comedyshow .qm-comedyshow-photos > .qm-comedyshow-photo-link,
.qm-fokusniki .qm-fokusniki-photos > .qm-fokusniki-photo-link,
.qm-muzukaliti .qm-muzukaliti-photos > .qm-muzukaliti-photo-link,
.qm-nazad90 .qm-nazad90-photos > .qm-nazad90-photo-link,
.qm-neigry__gallery-grid > .qm-neigry__gcell,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell,
.qm-whatashow__gallery-grid > .qm-whatashow__gcell,
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell,
.qm-sigarnoe-gallery__grid > .qm-sigarnoe-gallery__cell,
.qm-kubinskaya-gallery__grid > .qm-kubinskaya-gallery__cell,
.qm-russkiy-gallery__grid > .qm-russkiy-gallery__cell,
.qm-feb23-gallery__grid > .qm-feb23-gallery__cell,
.qm-mart8-gallery__grid > .qm-mart8-gallery__cell,
.qm-newyear-gallery__grid > .qm-newyear-gallery__cell,
.qm-report-photos__grid > .qm-report-photos__item,
.qm-hostdj-dj__grid > .qm-hostdj-dj__cell {
width: 100%;
min-width: 0;
}
}
/* ==========================================================================
5. Пропорция ячейки по факту содержимого — правки владельца 10.09.2026
(«обрезаются головы», /go-go-tequila-girls, /standup, фотоотчёты).
Причина. Пункты 1.2 и 4 дают всем фотосеткам горизонтальную ячейку 3:2.
Для блоков, где фотографии вертикальные (ростовые кадры танцовщиц,
комиков, ведущих), это означает `object-fit: cover` с чудовищным вырезом:
замерено в браузере на 390px — у /go-go-tequila-girls кадр 1300×1953
(пропорция 0.67) в ячейке 1.5 показывался на 44% высоты, 56% срезалось
поровну сверху и снизу. Верхние 28% ростового портрета — это голова.
То же у /what_a_show (срез 53%) и /vinnoe-kazino.
Решение — ячейка следует ориентации своих фотографий, а не наоборот.
Ниже перечислены блоки, где по факту (getimagesize по всем файлам блока)
преобладают вертикальные кадры; им задана пропорция 2:3. Кроп при этом
почти исчезает: 0.67 в 0.67.
Плюс общий предохранитель: `object-position` смещён к верхней трети, то
есть при любом оставшемся кропе первым уходит низ кадра, а не лицо.
========================================================================== */
/* --- 5.1. Блоки с вертикальными кадрами: ячейка 2:3 вместо 3:2 --- */
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell,
.qm-whatashow__gallery-grid > .qm-whatashow__gcell {
aspect-ratio: 2 / 3;
}
/* --- 5.2. Лицо важнее низа кадра: режем снизу, а не по центру --- */
.qm-gallery__triple img,
.qm-gamepage__gallery-grid img,
.qm-gamepage__mosaic img,
.qm-aishow .qm-aishow-photos img,
.qm-comedyshow .qm-comedyshow-photos img,
.qm-fokusniki .qm-fokusniki-photos img,
.qm-muzukaliti .qm-muzukaliti-photos img,
.qm-nazad90 .qm-nazad90-photos img,
.qm-neigry__gallery-grid img,
.qm-gromkiy__gallery-grid img,
.qm-bitvapolov__gallery-grid img,
.qm-nashchupal__gallery-grid img,
.qm-podmoskovnye__gallery-grid img,
.qm-whatashow__gallery-grid img,
.qm-karaoke-gallery__grid img,
.qm-kalyan-gallery__grid img,
.qm-vyezdnoybar-gallery__grid img,
.qm-gogo-gallery__grid img,
.qm-vinokazino-gallery__grid img,
.qm-fankazino-gallery__grid img,
.qm-sigarnoe-gallery__grid img,
.qm-kubinskaya-gallery__grid img,
.qm-russkiy-gallery__grid img,
.qm-feb23-gallery__grid img,
.qm-mart8-gallery__grid img,
.qm-newyear-gallery__grid img,
.qm-report-photos__grid img,
.qm-hostdj-dj__grid img,
.qm-hostdj-people__grid img {
object-position: 50% 28%;
}
/* --- 5.3. Картинка обязана заполнять свою ячейку.
Без этого пропорция из 5.1 меняет только рамку: у ![]()
в пакетных CSS
своя `aspect-ratio` и `height: auto`, и кадр остаётся прежним, а под ним
появляется пустота (замерено: ячейка 195×293, картинка 195×130). --- */
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell > img,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell > img,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell > img,
.qm-whatashow__gallery-grid > .qm-whatashow__gcell > img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
/* ==========================================================================
6. Нечётное число фотографий — одна колонка. Решение владельца 10.09.2026.
Было: при нечётном числе предпоследняя ячейка растягивалась на две строки
(п.1.3), чтобы закрыть дыру. Это и давало «выпавшее большое фото» в конце
блока, а вертикальный кадр в узкой высокой ячейке резался по бокам на
50-54% (замерено на /go-go-tequila-girls и /vinnoe-kazino, 390px).
Стало: блок с нечётным числом фото показывается в один столбец во всю
ширину. Ни дыры, ни растяжки, ни обрезки — картинка идёт в своей
натуральной пропорции. Чётные блоки остаются сеткой 2×2.
Ограничение `:not(:has(> *:nth-child(6)))` — только для небольших блоков
(3 и 5 фото). Большие ленты вроде /otchet (19 кадров) в один столбец
превратились бы в бесконечную простыню; там ровное число набирается
добавлением кадра, а не раскладкой.
========================================================================== */
@media (max-width: 575.98px) {
.qm-gallery__triple:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-gamepage__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-aishow .qm-aishow-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-comedyshow .qm-comedyshow-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-fokusniki .qm-fokusniki-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-muzukaliti .qm-muzukaliti-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-nazad90 .qm-nazad90-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-neigry__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-gromkiy__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-bitvapolov__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-nashchupal__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-podmoskovnye__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-whatashow__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-karaoke-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-kalyan-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-vyezdnoybar-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-gogo-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-vinokazino-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-fankazino-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-sigarnoe-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-kubinskaya-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-russkiy-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-feb23-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-mart8-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-newyear-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-report-photos__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))),
.qm-hostdj-dj__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) {
grid-template-columns: 1fr;
}
.qm-gallery__triple:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-gamepage__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-aishow .qm-aishow-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-comedyshow .qm-comedyshow-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-fokusniki .qm-fokusniki-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-muzukaliti .qm-muzukaliti-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-nazad90 .qm-nazad90-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-neigry__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-gromkiy__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-bitvapolov__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-nashchupal__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-podmoskovnye__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-whatashow__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-karaoke-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-kalyan-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-vyezdnoybar-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-gogo-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-vinokazino-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-fankazino-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-sigarnoe-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-kubinskaya-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-russkiy-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-feb23-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-mart8-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-newyear-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-report-photos__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > *,
.qm-hostdj-dj__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * {
grid-row: auto;
grid-column: auto;
aspect-ratio: auto;
height: auto;
}
.qm-gallery__triple:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-gamepage__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-aishow .qm-aishow-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-comedyshow .qm-comedyshow-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-fokusniki .qm-fokusniki-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-muzukaliti .qm-muzukaliti-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-nazad90 .qm-nazad90-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-neigry__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-gromkiy__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-bitvapolov__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-nashchupal__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-podmoskovnye__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-whatashow__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-karaoke-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-kalyan-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-vyezdnoybar-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-gogo-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-vinokazino-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-fankazino-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-sigarnoe-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-kubinskaya-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-russkiy-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-feb23-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-mart8-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-newyear-gallery__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-report-photos__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img,
.qm-hostdj-dj__grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > * > img {
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: contain;
}
}
/* ==========================================================================
7. Горизонтальный кадр в блоке вертикальных — на всю строку, без обрезки.
Решение владельца 10.09.2026 («оставить, дать свою ширину»). Класс
`--wide` проставляет партиал галереи, сравнив пропорции файлов блока
(см. gallery.blade.php в пакетах resources/views/site/wave3).
========================================================================== */
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide {
grid-column: 1 / -1;
aspect-ratio: auto;
height: auto;
}
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide > img,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide > img,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide > img,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide > img,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide > img,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide > img {
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: contain;
}
/* --- 7.1. Блок, где преобладают вертикальные кадры, получает от партиала
класс `--portrait`: ячейке задаётся вертикальная пропорция, иначе кадр
режется по высоте (замерено на /neigry: ячейка 4:3, фото 0.67, вырезало
50%). Список блоков вручную больше не ведём — ориентацию считает сам
партиал по размерам файлов. --- */
.qm-whatashow__gallery-grid--portrait > .qm-whatashow__gcell:not([class*="--wide"]),
.qm-neigry__gallery-grid--portrait > .qm-neigry__gcell:not([class*="--wide"]),
.qm-gromkiy__gallery-grid--portrait > .qm-gromkiy__gcell:not([class*="--wide"]),
.qm-bitvapolov__gallery-grid--portrait > .qm-bitvapolov__gcell:not([class*="--wide"]),
.qm-nashchupal__gallery-grid--portrait > .qm-nashchupal__gcell:not([class*="--wide"]),
.qm-podmoskovnye__gallery-grid--portrait > .qm-podmoskovnye__gcell:not([class*="--wide"]) {
aspect-ratio: 2 / 3;
}
.qm-whatashow__gallery-grid--portrait > .qm-whatashow__gcell:not([class*="--wide"]) > img,
.qm-neigry__gallery-grid--portrait > .qm-neigry__gcell:not([class*="--wide"]) > img,
.qm-gromkiy__gallery-grid--portrait > .qm-gromkiy__gcell:not([class*="--wide"]) > img,
.qm-bitvapolov__gallery-grid--portrait > .qm-bitvapolov__gcell:not([class*="--wide"]) > img,
.qm-nashchupal__gallery-grid--portrait > .qm-nashchupal__gcell:not([class*="--wide"]) > img,
.qm-podmoskovnye__gallery-grid--portrait > .qm-podmoskovnye__gcell:not([class*="--wide"]) > img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
/* ==========================================================================
8. Пакет chatgpt1 — та же разметка ориентации, что и у claude1.
Классы `-photos--portrait` и `-photo-link--wide` проставляет партиал
галереи пакета, сравнив пропорции файлов блока.
Заодно /standup возвращается в общую сетку 2x2 на мобильных: 10.09.2026
его вывели в один столбец «как в оригинале», но владелец в тот же день
попросил привести фотоблок к общей структуре сайта, блоками по четыре.
Одиночных растянутых кадров это не создаёт — нечётные блоки уходят
в один столбец по правилу 6.
========================================================================== */
@media (max-width: 575.98px) {
.qm-standup .qm-standup-photos {
grid-template-columns: 1fr 1fr;
}
.qm-standup .qm-standup-photos:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) {
grid-template-columns: 1fr;
}
}
.qm-aishow .qm-aishow-photos--portrait > .qm-aishow-photo-link:not([class*="--wide"]),
.qm-comedyshow .qm-comedyshow-photos--portrait > .qm-comedyshow-photo-link:not([class*="--wide"]),
.qm-fokusniki .qm-fokusniki-photos--portrait > .qm-fokusniki-photo-link:not([class*="--wide"]),
.qm-muzukaliti .qm-muzukaliti-photos--portrait > .qm-muzukaliti-photo-link:not([class*="--wide"]),
.qm-nazad90 .qm-nazad90-photos--portrait > .qm-nazad90-photo-link:not([class*="--wide"]),
.qm-standup .qm-standup-photos--portrait > .qm-standup-photo-link:not([class*="--wide"]) {
aspect-ratio: 2 / 3;
}
.qm-aishow .qm-aishow-photos--portrait > .qm-aishow-photo-link:not([class*="--wide"]) img,
.qm-comedyshow .qm-comedyshow-photos--portrait > .qm-comedyshow-photo-link:not([class*="--wide"]) img,
.qm-fokusniki .qm-fokusniki-photos--portrait > .qm-fokusniki-photo-link:not([class*="--wide"]) img,
.qm-muzukaliti .qm-muzukaliti-photos--portrait > .qm-muzukaliti-photo-link:not([class*="--wide"]) img,
.qm-nazad90 .qm-nazad90-photos--portrait > .qm-nazad90-photo-link:not([class*="--wide"]) img,
.qm-standup .qm-standup-photos--portrait > .qm-standup-photo-link:not([class*="--wide"]) img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 28%;
}
/* Выбивающийся горизонтальный кадр — на всю строку, целиком, без обрезки. */
.qm-aishow .qm-aishow-photo-link--wide,
.qm-comedyshow .qm-comedyshow-photo-link--wide,
.qm-fokusniki .qm-fokusniki-photo-link--wide,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide,
.qm-nazad90 .qm-nazad90-photo-link--wide,
.qm-standup .qm-standup-photo-link--wide {
grid-column: 1 / -1;
aspect-ratio: auto;
height: auto;
}
.qm-aishow .qm-aishow-photo-link--wide img,
.qm-comedyshow .qm-comedyshow-photo-link--wide img,
.qm-fokusniki .qm-fokusniki-photo-link--wide img,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide img,
.qm-nazad90 .qm-nazad90-photo-link--wide img,
.qm-standup .qm-standup-photo-link--wide img {
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: contain;
}
/* ==========================================================================
9. Широкий кадр на десктопе — две колонки, а не вся строка.
На мобильном (правила 7 и 8) он занимает всю строку и показывается
целиком: строка там всего из двух колонок. На десктопе колонок 3-4, и
«вся строка» превращала кадр в огромную плашку, а соседние ячейки
оставались вдвое ниже — ряд получался рваным (замерено на /what_a_show,
1440px: 356x534 рядом с 356x238).
От 576px такой кадр занимает две колонки и тянется на высоту ряда:
пропорция выходит около 1.37 против 1.5 у самого кадра, срез ~9% по
краям вместо прежних 60%, а ряд остаётся ровным.
========================================================================== */
@media (min-width: 576px) {
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide,
.qm-aishow .qm-aishow-photo-link--wide,
.qm-comedyshow .qm-comedyshow-photo-link--wide,
.qm-fokusniki .qm-fokusniki-photo-link--wide,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide,
.qm-nazad90 .qm-nazad90-photo-link--wide,
.qm-standup .qm-standup-photo-link--wide {
grid-column: span 2;
aspect-ratio: auto;
align-self: stretch;
height: auto;
}
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide > img,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide > img,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide > img,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide > img,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide > img,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide > img,
.qm-aishow .qm-aishow-photo-link--wide img,
.qm-comedyshow .qm-comedyshow-photo-link--wide img,
.qm-fokusniki .qm-fokusniki-photo-link--wide img,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide img,
.qm-nazad90 .qm-nazad90-photo-link--wide img,
.qm-standup .qm-standup-photo-link--wide img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
}
/* --- 9.1. У пакета claude1 сетка на десктопе построена на flex, а не на
grid: `grid-column` там мёртвая запись (замерено: контейнер
display:flex, ячейки flex 0 0 25%). Широкому кадру задаём ширину
в две колонки тем же способом, каким её задают соседям. --- */
@media (min-width: 576px) {
.qm-whatashow__gallery-grid--cols-4 > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid--cols-4 > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid--cols-4 > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid--cols-4 > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid--cols-4 > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid--cols-4 > .qm-podmoskovnye__gcell--wide {
flex: 0 0 50%;
max-width: 50%;
}
.qm-whatashow__gallery-grid--cols-3 > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid--cols-3 > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid--cols-3 > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid--cols-3 > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid--cols-3 > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid--cols-3 > .qm-podmoskovnye__gcell--wide {
flex: 0 0 66.6667%;
max-width: 66.6667%;
}
.qm-whatashow__gallery-grid--cols-2 > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid--cols-2 > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid--cols-2 > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid--cols-2 > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid--cols-2 > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid--cols-2 > .qm-podmoskovnye__gcell--wide {
flex: 0 0 100%;
max-width: 100%;
}
}
/* --- 9.2. Пакет cursor1 — та же разметка ориентации. Классы ставит
resources/views/site/wave3/cursor1/partials/gallery.blade.php --- */
.qm-karaoke-gallery__grid--portrait > .qm-karaoke-gallery__cell:not([class*="--wide"]),
.qm-kalyan-gallery__grid--portrait > .qm-kalyan-gallery__cell:not([class*="--wide"]),
.qm-vyezdnoybar-gallery__grid--portrait > .qm-vyezdnoybar-gallery__cell:not([class*="--wide"]),
.qm-gogo-gallery__grid--portrait > .qm-gogo-gallery__cell:not([class*="--wide"]),
.qm-vinokazino-gallery__grid--portrait > .qm-vinokazino-gallery__cell:not([class*="--wide"]),
.qm-fankazino-gallery__grid--portrait > .qm-fankazino-gallery__cell:not([class*="--wide"]) {
aspect-ratio: 2 / 3;
}
.qm-karaoke-gallery__grid--portrait > .qm-karaoke-gallery__cell:not([class*="--wide"]) > img,
.qm-kalyan-gallery__grid--portrait > .qm-kalyan-gallery__cell:not([class*="--wide"]) > img,
.qm-vyezdnoybar-gallery__grid--portrait > .qm-vyezdnoybar-gallery__cell:not([class*="--wide"]) > img,
.qm-gogo-gallery__grid--portrait > .qm-gogo-gallery__cell:not([class*="--wide"]) > img,
.qm-vinokazino-gallery__grid--portrait > .qm-vinokazino-gallery__cell:not([class*="--wide"]) > img,
.qm-fankazino-gallery__grid--portrait > .qm-fankazino-gallery__cell:not([class*="--wide"]) > img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide {
grid-column: 1 / -1;
aspect-ratio: auto;
height: auto;
}
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide > img,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide > img,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide > img,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide > img,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide > img,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide > img {
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: contain;
}
@media (min-width: 576px) {
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide {
grid-column: span 2;
align-self: stretch;
height: auto;
}
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide > img,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide > img,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide > img,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide > img,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide > img,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide > img {
height: 100%;
object-fit: cover;
}
}
/* --- 9.3. Одиночный вертикальный кадр в блоке горизонтальных: ячейка
остаётся общей (ряд не рвём), но кадр вписывается целиком, а не
обрезается. Замерено на /vyezdnoj-bar: при `cover` срезало 59% —
ровно голову. --- */
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--tall > img,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--tall > img,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--tall > img,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--tall > img,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--tall > img,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--tall > img {
object-fit: contain;
}
/* ==========================================================================
10. Пакеты gamepage и unique (/otchet, /veduschij_i_dj) — тот же механизм
ориентации, что в п.7–9 для wave3. Классы ставят партиалы
site/gamepage/partials/gallery.blade.php, site/unique/partials/bodies/
otchet.blade.php и veduschij_i_dj.blade.php. Правка владельца 11.09.2026:
три блока оставались на прежней раскладке. Замерено: вертикальный кадр в
ячейке 3:2 терял 49% (/muz_loto), в квадрате 1:1 — 44% (диджеи), в 4:3 —
42% (/otchet, 5 вертикальных из 20).
========================================================================== */
/* --- 10.1. Вертикальный кадр в горизонтальном блоке — целиком, без обрезки.
У gamepage имя `--fit`, а не `--tall`: `--tall` там уже занят высокой
ячейкой мозаики. У карточки фотоотчёта есть рамка — фон под вписанным
кадром чёрный, как у соседей, а не серый. --- */
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--fit > img,
.qm-report-photos__grid > .qm-report-photos__item--tall > img {
object-fit: contain;
}
.qm-report-photos__grid > .qm-report-photos__item--tall {
background: #000;
}
/* --- 10.2. gamepage: блок с преобладанием вертикальных кадров (`--portrait`,
ячейка 2:3) и горизонтальный кадр в нём (`--wide`). Сейчас таких блоков
у игровых страниц нет, разметка на будущее — если владелец заменит фото,
партиал разметит сам. Сетка gamepage на десктопе — flex, поэтому ширина
широкому кадру задаётся через flex, как соседям. --- */
.qm-gamepage__gallery-grid--portrait > .qm-gamepage__gcell:not([class*="--wide"]) {
aspect-ratio: 2 / 3;
}
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--wide {
grid-column: 1 / -1;
aspect-ratio: auto;
height: auto;
}
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--wide > img {
position: relative;
inset: auto;
width: 100%;
height: auto;
object-fit: contain;
}
@media (min-width: 576px) {
.qm-gamepage__gallery-grid--triple > .qm-gamepage__gcell--wide {
flex: 0 0 66.6667%;
max-width: 66.6667%;
}
.qm-gamepage__gallery-grid--six > .qm-gamepage__gcell--wide {
flex: 0 0 100%;
max-width: 100%;
}
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--wide > img {
position: absolute;
inset: 0;
height: 100%;
object-fit: cover;
}
}
@media (min-width: 768px) {
.qm-gamepage__gallery-grid--six > .qm-gamepage__gcell--wide {
flex: 0 0 66.6667%;
max-width: 66.6667%;
}
}
@media (min-width: 992px) {
.qm-gamepage__gallery-grid--six > .qm-gamepage__gcell--wide {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
}
/* --- 10.3. Диджеи (/veduschij_i_dj): 4 вертикальных + 4 горизонтальных.
Партиал сортирует кадры по ориентации, поэтому каждая строка сетки
однородна: строка из четырёх портретов (2:3), строка из четырёх
горизонтальных (3:2); на мобильном 2×2 строки тоже однородны (пары).
Квадрат 1:1 из пакета снят; 576–767px раньше давали один столбец
огромных кадров — теперь две колонки, как ниже 576. --- */
.qm-hostdj-dj__grid {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
.qm-hostdj-dj__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.qm-hostdj-dj__grid > .qm-hostdj-dj__cell {
display: block;
width: 100%;
min-width: 0;
overflow: hidden;
}
.qm-hostdj-dj__grid > .qm-hostdj-dj__cell--portrait {
aspect-ratio: 2 / 3;
}
.qm-hostdj-dj__grid > .qm-hostdj-dj__cell--landscape {
aspect-ratio: 3 / 2;
}
.qm-hostdj-dj__grid > .qm-hostdj-dj__cell > img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
/* --- 10.4. Большая лента с нечётным числом кадров на мобильном: последний
кадр-сироту не показываем. Ленты от 6 кадров в один столбец не
разворачиваются (п.6), и п.1.3 растягивал предпоследнюю ячейку на две
строки — ровно «выпавшее большое фото» с кропом 50% (замерено на
/muz_loto, 11 кадров, 390px). Решение владельца 11.09: лучше меньше
кадров, чем кривой кроп. От 576px лента идёт целиком. Ровное число
набирается добавлением кадра — тогда правило перестаёт действовать само.
п.1.3 считает DOM-детей, а не видимые, поэтому растяжку предпоследней
снимаем отдельно. --- */
@media (max-width: 575.98px) {
.qm-gamepage__gallery-grid--six:has(> *:nth-child(6)) > .qm-gamepage__gcell:last-child:nth-child(odd),
.qm-report-photos__grid:has(> *:nth-child(6)) > .qm-report-photos__item:last-child:nth-child(odd) {
display: none;
}
.qm-gamepage__gallery-grid--six:has(> *:nth-child(6)):has(> *:last-child:nth-child(odd)) > .qm-gamepage__gcell:nth-child(even):nth-last-child(2) {
grid-row: auto;
aspect-ratio: 1200 / 800;
height: auto;
}
.qm-report-photos__grid:has(> *:nth-child(6)):has(> *:last-child:nth-child(odd)) > .qm-report-photos__item:nth-child(even):nth-last-child(2) {
grid-row: auto;
aspect-ratio: 4 / 3;
height: auto;
}
}
/* --- 10.5. gamepage: блок из 3 кадров в один столбец (п.6) схлопывался в
нулевую высоту. У gamepage ![]()
в ячейке `position:absolute; inset:0`
(пакетный CSS), п.6 задаёт ячейке `height:auto`, а картинке —
`aspect-ratio:auto`, что снимает пропорцию из атрибутов width/height.
Ленивая картинка до загрузки не имеет собственной пропорции, ячейка
остаётся 390×0 и в область загрузки не попадает (замерено 11.09.2026 на
/muz_loto и /bunker, 390px). Решение: партиал gallery-cell.blade.php
отдаёт пропорцию кадра переменной `--qm-ar`, ячейка держит её сама, а
картинка вписывается в ячейку целиком — пропорции совпадают, полей нет. --- */
@media (max-width: 575.98px) {
.qm-gamepage__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > .qm-gamepage__gcell {
aspect-ratio: var(--qm-ar, 3 / 2);
height: auto;
}
.qm-gamepage__gallery-grid:has(> *:last-child:nth-child(odd)):not(:has(> *:nth-child(6))) > .qm-gamepage__gcell > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
}
/* ==========================================================================
11. /standup — плитки по людям. Правка владельца 11.09.2026 по скриншоту
430px: блок из 3 кадров уходил в один столбец (п.6) и давал огромное
одиночное фото — «не норм»; эталон — мелкие плитки как у блока из 4.
Кадры переложены по людям (payload `p_standup_body`, блоки b3287/b3357):
Андрей — 3, Эд Дородный — 3, остальные комики — 4 отдельным блоком.
========================================================================== */
@media (max-width: 575.98px) {
/* --- 11.1. Блок из трёх кадров — три плитки в ряд 2:3: без дыры, без
растяжки, без одиночного большого кадра, все кадры на месте. --- */
.qm-standup .qm-standup-photos.qm-standup-photos-3:has(> *:last-child:nth-child(3)) {
grid-template-columns: repeat(3, 1fr);
}
.qm-standup .qm-standup-photos.qm-standup-photos-3:has(> *:last-child:nth-child(3)) > .qm-standup-photo-link {
grid-row: auto;
grid-column: auto;
width: 100%;
aspect-ratio: 2 / 3;
height: auto;
}
.qm-standup .qm-standup-photos.qm-standup-photos-3:has(> *:last-child:nth-child(3)) > .qm-standup-photo-link img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 28%;
}
}
/* --- 11.2. Горизонтальный кадр (Comedy34, комик по центру) остаётся
плиткой 2:3 с обрезкой по бокам на всех ширинах, а не строкой во всю
ширину (п.8) и не двумя колонками (п.9): на мобильном это снова
одиночное большое фото, на десктопе пятая колонка в ряду из четырёх
рвёт строку. Лицо по центру кадра, боковой срез его не задевает. --- */
.qm-standup .qm-standup-photos > .qm-standup-photo-link--wide {
grid-column: auto;
aspect-ratio: 2 / 3;
height: auto;
align-self: auto;
}
.qm-standup .qm-standup-photos > .qm-standup-photo-link--wide img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 28%;
}
/* --- 11.3. Соседние галереи (Эд → остальные комики) разделяют заголовки
с именами над плитками (просьба владельца 11.09: «убрать линию, сделать
имена комиков»). Красная линия снята. Заголовок рендерит партиал
chatgpt1/gallery.blade.php из поля title блока; стиль — как у заголовков
split-блоков пакета. Имя для третьего блока владелец ещё не дал —
пока «Наши стендап-комики». --- */
.qm-standup .qm-standup-gallery-title {
margin: 0;
padding: 28px 15px 16px;
color: #fff;
font: 700 26px/1.2 Oswald, sans-serif;
text-transform: uppercase;
text-align: center;
}
@media (min-width: 768px) {
.qm-standup .qm-standup-gallery-title {
padding: 40px 15px 20px;
font-size: 30px;
}
}
/* --- 11.4. Блок Эда без большого портрета (просьба владельца 11.09:
«первый блок сделать как второй, плитка 4 маленьких»). Портрет 3f8 из
split-блока b3286 перенесён четвёртой плиткой в галерею b3287, у split
картинок не осталось. Пустая медиа-колонка split держит min-height 300px
(пакетный CSS) — прячем её, а текст растягиваем на всю ширину строки. --- */
.qm-standup .qm-standup-split-media:not(:has(img)) {
display: none;
}
.qm-standup .qm-standup-split-row:not(:has(.qm-standup-split-media img)) > .qm-standup-split-copy {
flex: 0 0 100%;
max-width: 100%;
}
/* --- 9.4. Широкая ячейка без соседей-портретов в ряду схлопывалась в 0.
Замерено 11.09.2026 на /neigry, 1440: блок из 2 горизонтальных и 2
вертикальных — оба горизонтальных получают `--wide` (flex 50%) и
занимают первый ряд целиком; п.9 даёт им `aspect-ratio:auto; height:auto`
и картинке `height:100%` — без портрета рядом высоту брать неоткуда,
ячейки 713×0 и ленивые картинки не грузятся. Задаём широкой ячейке 4:3:
при ширине вдвое больше портретной ячейки 2:3 это ровно та же высота
(2 × 2/3 = 4/3), ряд остаётся ровным при 2, 3 и 4 колонках, а срез
кадра 1.5 — 11% по бокам. --- */
@media (min-width: 576px) {
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide,
.qm-aishow .qm-aishow-photo-link--wide,
.qm-comedyshow .qm-comedyshow-photo-link--wide,
.qm-fokusniki .qm-fokusniki-photo-link--wide,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide,
.qm-nazad90 .qm-nazad90-photo-link--wide,
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide {
aspect-ratio: 4 / 3;
}
}
/* ==========================================================================
12. Десктоп: галереи в ширину контентного контейнера, а не экрана.
Замечание владельца 11.09.2026: «на ПК все медиагалереи — слишком крупные
картинки». Замерено на 1440: все сетки шли во всю ширину (1425px),
ячейки 475×316 при 3 колонках, 713×534 при 2 (chatgpt1 `-photos-4`),
475×713 у вертикальных блоков. Контентный контейнер сайта `.qm-container`
— 960px на 992–1199 и 1140px от 1200 (home.css); галереи приводятся к
нему: 3 колонки → 380px, 4 колонки → 285px. Вертикальные блоки из 3
кадров получают плитки 25% по центру — тот же размер, что у блоков из 4.
`-photos-4` пакета chatgpt1 вне /standup шёл в 2 колонки (713px) —
теперь 4. Лента `--six` (/muz_loto) и мозаика /bunker не трогаются.
========================================================================== */
@media (min-width: 992px) {
.qm-gallery__triple,
.qm-gamepage__gallery-grid:not(.qm-gamepage__gallery-grid--six),
.qm-aishow .qm-aishow-photos,
.qm-comedyshow .qm-comedyshow-photos,
.qm-fokusniki .qm-fokusniki-photos,
.qm-muzukaliti .qm-muzukaliti-photos,
.qm-nazad90 .qm-nazad90-photos,
.qm-standup .qm-standup-photos,
.qm-neigry__gallery-grid,
.qm-gromkiy__gallery-grid,
.qm-bitvapolov__gallery-grid,
.qm-nashchupal__gallery-grid,
.qm-podmoskovnye__gallery-grid,
.qm-whatashow__gallery-grid,
.qm-karaoke-gallery__grid,
.qm-kalyan-gallery__grid,
.qm-vyezdnoybar-gallery__grid,
.qm-gogo-gallery__grid,
.qm-vinokazino-gallery__grid,
.qm-fankazino-gallery__grid,
.qm-sigarnoe-gallery__grid,
.qm-kubinskaya-gallery__grid,
.qm-russkiy-gallery__grid,
.qm-feb23-gallery__grid,
.qm-mart8-gallery__grid,
.qm-newyear-gallery__grid,
.qm-report-photos__grid,
.qm-hostdj-dj__grid {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
/* --- 12.1. chatgpt1 `-photos-4`: четыре колонки, как у /standup --- */
.qm-aishow .qm-aishow-photos.qm-aishow-photos-4,
.qm-comedyshow .qm-comedyshow-photos.qm-comedyshow-photos-4,
.qm-fokusniki .qm-fokusniki-photos.qm-fokusniki-photos-4,
.qm-muzukaliti .qm-muzukaliti-photos.qm-muzukaliti-photos-4,
.qm-nazad90 .qm-nazad90-photos.qm-nazad90-photos-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* --- 12.2. Вертикальный блок из 3 кадров: плитки 25% по центру.
Grid-пакеты (chatgpt1, cursor1) — три колонки по 25% с центровкой;
flex-пакет claude1 — flex-basis 25% и justify-content. --- */
.qm-aishow .qm-aishow-photos--portrait:has(> *:last-child:nth-child(3)),
.qm-comedyshow .qm-comedyshow-photos--portrait:has(> *:last-child:nth-child(3)),
.qm-fokusniki .qm-fokusniki-photos--portrait:has(> *:last-child:nth-child(3)),
.qm-muzukaliti .qm-muzukaliti-photos--portrait:has(> *:last-child:nth-child(3)),
.qm-nazad90 .qm-nazad90-photos--portrait:has(> *:last-child:nth-child(3)),
.qm-standup .qm-standup-photos--portrait:has(> *:last-child:nth-child(3)),
.qm-karaoke-gallery__grid--portrait:has(> *:last-child:nth-child(3)),
.qm-kalyan-gallery__grid--portrait:has(> *:last-child:nth-child(3)),
.qm-vyezdnoybar-gallery__grid--portrait:has(> *:last-child:nth-child(3)),
.qm-gogo-gallery__grid--portrait:has(> *:last-child:nth-child(3)),
.qm-vinokazino-gallery__grid--portrait:has(> *:last-child:nth-child(3)),
.qm-fankazino-gallery__grid--portrait:has(> *:last-child:nth-child(3)) {
grid-template-columns: repeat(3, 25%);
justify-content: center;
}
.qm-whatashow__gallery-grid--portrait:has(> *:last-child:nth-child(3)),
.qm-neigry__gallery-grid--portrait:has(> *:last-child:nth-child(3)),
.qm-gromkiy__gallery-grid--portrait:has(> *:last-child:nth-child(3)),
.qm-bitvapolov__gallery-grid--portrait:has(> *:last-child:nth-child(3)),
.qm-nashchupal__gallery-grid--portrait:has(> *:last-child:nth-child(3)),
.qm-podmoskovnye__gallery-grid--portrait:has(> *:last-child:nth-child(3)) {
justify-content: center;
}
.qm-whatashow__gallery-grid--portrait:has(> *:last-child:nth-child(3)) > .qm-whatashow__gcell:not([class*="--wide"]),
.qm-neigry__gallery-grid--portrait:has(> *:last-child:nth-child(3)) > .qm-neigry__gcell:not([class*="--wide"]),
.qm-gromkiy__gallery-grid--portrait:has(> *:last-child:nth-child(3)) > .qm-gromkiy__gcell:not([class*="--wide"]),
.qm-bitvapolov__gallery-grid--portrait:has(> *:last-child:nth-child(3)) > .qm-bitvapolov__gcell:not([class*="--wide"]),
.qm-nashchupal__gallery-grid--portrait:has(> *:last-child:nth-child(3)) > .qm-nashchupal__gcell:not([class*="--wide"]),
.qm-podmoskovnye__gallery-grid--portrait:has(> *:last-child:nth-child(3)) > .qm-podmoskovnye__gcell:not([class*="--wide"]) {
flex: 0 0 25%;
max-width: 25%;
}
/* --- 12.3. Фотоотчёты: ровно 4 колонки в контейнере вместо auto-fill --- */
.qm-report-photos__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.qm-gallery__triple,
.qm-gamepage__gallery-grid:not(.qm-gamepage__gallery-grid--six),
.qm-aishow .qm-aishow-photos,
.qm-comedyshow .qm-comedyshow-photos,
.qm-fokusniki .qm-fokusniki-photos,
.qm-muzukaliti .qm-muzukaliti-photos,
.qm-nazad90 .qm-nazad90-photos,
.qm-standup .qm-standup-photos,
.qm-neigry__gallery-grid,
.qm-gromkiy__gallery-grid,
.qm-bitvapolov__gallery-grid,
.qm-nashchupal__gallery-grid,
.qm-podmoskovnye__gallery-grid,
.qm-whatashow__gallery-grid,
.qm-karaoke-gallery__grid,
.qm-kalyan-gallery__grid,
.qm-vyezdnoybar-gallery__grid,
.qm-gogo-gallery__grid,
.qm-vinokazino-gallery__grid,
.qm-fankazino-gallery__grid,
.qm-sigarnoe-gallery__grid,
.qm-kubinskaya-gallery__grid,
.qm-russkiy-gallery__grid,
.qm-feb23-gallery__grid,
.qm-mart8-gallery__grid,
.qm-newyear-gallery__grid,
.qm-report-photos__grid,
.qm-hostdj-dj__grid {
max-width: 1140px;
}
}
/* ==========================================================================
13. Единая медиаплитка на десктопе — «весь сайт привести в порядок:
фотки и плиточный стиль» (владелец, 11.09.2026). Замер 1440 по всем
страницам: одиночные фото шли во всю ширину экрана (1425×1033 на
/gromkiy-vopros, 1100×1519 на /go-go), split-фото занимали половину
экрана на всю высоту текста (713×1070 на /fokusniki, 713×794),
мозаики 713×810, а горизонтальный кадр `--wide` в ряду из четырёх
уезжал на новую строку и оставлял дыру (/what_a_show).
Правила:
- одиночное фото — в контейнер 1140 и не выше 520px (cover, лицо в
верхней трети);
- фото в split-блоке (текст | фото) — не выше 520px, по центру
колонки, без растягивания на высоту текста; так же лечится мыло у
Андрея на /standup (828px-кадр больше не тянулся на 752px);
- мозаики — в контейнер, высота 520;
- в галереях на ≥576px никаких «широких» ячеек: горизонтальный кадр в
вертикальном блоке — такая же плитка 2:3 с боковым срезом (лицо по
центру), ряд всегда полный, дыр нет;
- вертикальный кадр в горизонтальном блоке — cover с якорем сверху
(голова цела, уходит низ), а не contain с чёрными полями.
========================================================================== */
/* --- 13.1. Одиночные фото --- */
@media (min-width: 992px) {
.qm-karaoke-figure, .qm-kalyan-figure, .qm-vyezdnoybar-figure,
.qm-gogo-figure, .qm-vinokazino-figure, .qm-fankazino-figure,
.qm-whatashow__image, .qm-neigry__image, .qm-gromkiy__image,
.qm-bitvapolov__image, .qm-nashchupal__image, .qm-podmoskovnye__image,
.qm-aishow .qm-aishow-photo, .qm-comedyshow .qm-comedyshow-photo,
.qm-fokusniki .qm-fokusniki-photo, .qm-muzukaliti .qm-muzukaliti-photo,
.qm-nazad90 .qm-nazad90-photo, .qm-standup .qm-standup-photo,
.qm-sigarnoe-captioned__row, .qm-kubinskaya-captioned__row,
.qm-russkiy-captioned__row, .qm-feb23-captioned__row,
.qm-mart8-captioned__row, .qm-newyear-captioned__row {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
.qm-karaoke-figure img, .qm-kalyan-figure img, .qm-vyezdnoybar-figure img,
.qm-gogo-figure img, .qm-vinokazino-figure img, .qm-fankazino-figure img,
.qm-whatashow__image img, .qm-neigry__image img, .qm-gromkiy__image img,
.qm-bitvapolov__image img, .qm-nashchupal__image img, .qm-podmoskovnye__image img,
.qm-aishow .qm-aishow-photo img, .qm-comedyshow .qm-comedyshow-photo img,
.qm-fokusniki .qm-fokusniki-photo img, .qm-muzukaliti .qm-muzukaliti-photo img,
.qm-nazad90 .qm-nazad90-photo img, .qm-standup .qm-standup-photo img {
display: block;
width: 100%;
height: auto;
max-height: 520px;
object-fit: cover;
object-position: 50% 30%;
}
/* --- 13.2. Split: текст | фото. Фото не выше 520px и по центру колонки --- */
.qm-aishow .qm-aishow-split-media, .qm-comedyshow .qm-comedyshow-split-media,
.qm-fokusniki .qm-fokusniki-split-media, .qm-muzukaliti .qm-muzukaliti-split-media,
.qm-nazad90 .qm-nazad90-split-media, .qm-standup .qm-standup-split-media,
.qm-karaoke-split__media, .qm-kalyan-split__media, .qm-vyezdnoybar-split__media,
.qm-gogo-split__media, .qm-vinokazino-split__media, .qm-fankazino-split__media,
.qm-sigarnoe-split__media, .qm-kubinskaya-split__media, .qm-russkiy-split__media,
.qm-feb23-split__media, .qm-mart8-split__media, .qm-newyear-split__media,
.qm-whatashow__media-media, .qm-neigry__media-media, .qm-gromkiy__media-media,
.qm-bitvapolov__media-media, .qm-nashchupal__media-media, .qm-podmoskovnye__media-media,
.qm-gamepage__split-media {
min-height: 0;
max-height: 520px;
align-self: center;
overflow: hidden;
}
.qm-aishow .qm-aishow-split-media img, .qm-comedyshow .qm-comedyshow-split-media img,
.qm-fokusniki .qm-fokusniki-split-media img, .qm-muzukaliti .qm-muzukaliti-split-media img,
.qm-nazad90 .qm-nazad90-split-media img, .qm-standup .qm-standup-split-media img,
.qm-karaoke-split__media img, .qm-kalyan-split__media img, .qm-vyezdnoybar-split__media img,
.qm-gogo-split__media img, .qm-vinokazino-split__media img, .qm-fankazino-split__media img,
.qm-sigarnoe-split__media img, .qm-kubinskaya-split__media img, .qm-russkiy-split__media img,
.qm-feb23-split__media img, .qm-mart8-split__media img, .qm-newyear-split__media img,
.qm-whatashow__media-media img, .qm-neigry__media-media img, .qm-gromkiy__media-media img,
.qm-bitvapolov__media-media img, .qm-nashchupal__media-media img, .qm-podmoskovnye__media-media img,
.qm-gamepage__split-media img {
display: block;
width: 100%;
height: auto;
max-height: 520px;
object-fit: cover;
object-position: 50% 30%;
}
/* --- 13.3. Мозаики (главная, /bunker) — в контейнер, высота 520 --- */
.qm-gamepage__mosaic, .qm-gallery__mosaic {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
min-height: 0;
height: 520px;
max-height: 520px;
}
}
/* --- 13.4. Галереи от 576px: «широких» ячеек нет — плитка 2:3 как у
соседей (отменяет п.7, 8, 9, 9.1, 9.4 на этих ширинах; ниже 576px
широкий кадр по-прежнему занимает строку целиком, там строка из двух). --- */
@media (min-width: 576px) {
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide,
.qm-aishow .qm-aishow-photo-link--wide,
.qm-comedyshow .qm-comedyshow-photo-link--wide,
.qm-fokusniki .qm-fokusniki-photo-link--wide,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide,
.qm-nazad90 .qm-nazad90-photo-link--wide,
.qm-standup .qm-standup-photo-link--wide,
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide,
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--wide {
grid-column: auto;
aspect-ratio: 2 / 3;
align-self: auto;
height: auto;
}
.qm-whatashow__gallery-grid--cols-4 > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid--cols-4 > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid--cols-4 > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid--cols-4 > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid--cols-4 > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid--cols-4 > .qm-podmoskovnye__gcell--wide {
flex: 0 0 25%;
max-width: 25%;
}
.qm-whatashow__gallery-grid--cols-3 > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid--cols-3 > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid--cols-3 > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid--cols-3 > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid--cols-3 > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid--cols-3 > .qm-podmoskovnye__gcell--wide {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.qm-whatashow__gallery-grid--cols-2 > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid--cols-2 > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid--cols-2 > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid--cols-2 > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid--cols-2 > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid--cols-2 > .qm-podmoskovnye__gcell--wide {
flex: 0 0 50%;
max-width: 50%;
}
.qm-gamepage__gallery-grid--triple > .qm-gamepage__gcell--wide {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide > img,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide > img,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide > img,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide > img,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide > img,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide > img,
.qm-aishow .qm-aishow-photo-link--wide img,
.qm-comedyshow .qm-comedyshow-photo-link--wide img,
.qm-fokusniki .qm-fokusniki-photo-link--wide img,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide img,
.qm-nazad90 .qm-nazad90-photo-link--wide img,
.qm-standup .qm-standup-photo-link--wide img,
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide > img,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide > img,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide > img,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide > img,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide > img,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide > img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 28%;
}
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--wide > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 28%;
}
}
/* --- 13.5. Вертикальный кадр в горизонтальном блоке: cover с якорем
сверху вместо contain (п.9.3, 10.1) — без чёрных полей в плитке, голова
цела, срезается низ. --- */
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--tall > img,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--tall > img,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--tall > img,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--tall > img,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--tall > img,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--tall > img,
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--fit > img,
.qm-report-photos__grid > .qm-report-photos__item--tall > img {
object-fit: cover;
object-position: 50% 0;
}
/* --- 12.5. Блок из 4 или 8 кадров на десктопе — четыре колонки в любом
пакете. После добора кадров из архива (11.09) блоки из 3 стали блоками
из 4, а пакетные сетки на 3 колонки клали их как 3 + 1 — снова «пустое
пространство». Grid-пакеты получают repeat(4), flex-пакеты (gamepage
triple, claude1 cols-3, главная) — ячейку 25%.
`*:not(.qm-gfill):last-child` — обязательное уточнение (wave5): у блока из
трёх кадров маркер `.qm-gfill` (п.17) стоит четвёртым и последним ребёнком,
и без `:not()` такой блок проходил как «четыре кадра». Специфичность у
правила выше, чем у п.17.3, поэтому три кадра получали четыре колонки и
пустую четвёртую — ровно то «пустое пространство», против которого правило
и написано (замерено на /show-nazad-v-90-e: контейнер 1140, колонки
4 x 285, занято 855). --- */
/* wave5: порог поднят 992 -> 1200. Планшетный эталон владельца
(/vyezdnoj-bar, п.56) — две колонки, поэтому четыре колонки остаются
только на десктопе. Диапазон 576-1199 разбирает п.20. */
@media (min-width: 1200px) {
.qm-aishow .qm-aishow-photos:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-comedyshow .qm-comedyshow-photos:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-fokusniki .qm-fokusniki-photos:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-muzukaliti .qm-muzukaliti-photos:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-nazad90 .qm-nazad90-photos:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-standup .qm-standup-photos:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-karaoke-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-kalyan-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-vyezdnoybar-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-gogo-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-vinokazino-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-fankazino-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-sigarnoe-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-kubinskaya-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-russkiy-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-feb23-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-mart8-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))),
.qm-newyear-gallery__grid:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) {
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-content: stretch;
}
.qm-gamepage__gallery-grid--triple:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) > .qm-gamepage__gcell,
.qm-whatashow__gallery-grid--cols-3:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) > .qm-whatashow__gcell,
.qm-neigry__gallery-grid--cols-3:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) > .qm-neigry__gcell,
.qm-gromkiy__gallery-grid--cols-3:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) > .qm-gromkiy__gcell,
.qm-bitvapolov__gallery-grid--cols-3:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) > .qm-bitvapolov__gcell,
.qm-nashchupal__gallery-grid--cols-3:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) > .qm-nashchupal__gcell,
.qm-podmoskovnye__gallery-grid--cols-3:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) > .qm-podmoskovnye__gcell,
.qm-gallery__triple:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) > .qm-gallery__cell {
flex: 0 0 25%;
max-width: 25%;
width: 25%;
}
.qm-gallery__triple:is(:has(> *:not(.qm-gfill):last-child:nth-child(4)), :has(> *:not(.qm-gfill):last-child:nth-child(8))) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* --- 11.5. /standup, блок Андрея (b2250): кадр с крыши перенесён из
split-блока первой плиткой галереи — просьба владельца 11.09 «плитки
соединить», на телефоне тоже плитка 2×2 «4 маленьких». Кадр
горизонтальный, Андрей у правого края — якорим срез вправо на всех
ширинах; остальное делают общие правила (п.8 — 2 колонки на мобильном,
п.11.2 — широкая ячейка как плитка 2:3, п.12.5 — 4 колонки на десктопе). --- */
.qm-standup #b2250 .qm-standup-photo-link--wide img {
object-position: 100% 50%;
}
/* --- 14. Split-блоки без картинки (фото ушло в плитки, 11.09): медиа-колонка
не рендерится (партиалы), текст — на всю ширину. Для chatgpt1 колонка
есть, но пуста — прячем (обобщение п.11.4 на все шесть namespace). --- */
.qm-aishow .qm-aishow-split-media:not(:has(img)), .qm-comedyshow .qm-comedyshow-split-media:not(:has(img)),
.qm-fokusniki .qm-fokusniki-split-media:not(:has(img)), .qm-muzukaliti .qm-muzukaliti-split-media:not(:has(img)),
.qm-nazad90 .qm-nazad90-split-media:not(:has(img)), .qm-standup .qm-standup-split-media:not(:has(img)) {
display: none;
}
.qm-aishow .qm-aishow-split-row:not(:has(.qm-aishow-split-media img)) > .qm-aishow-split-copy,
.qm-comedyshow .qm-comedyshow-split-row:not(:has(.qm-comedyshow-split-media img)) > .qm-comedyshow-split-copy,
.qm-fokusniki .qm-fokusniki-split-row:not(:has(.qm-fokusniki-split-media img)) > .qm-fokusniki-split-copy,
.qm-muzukaliti .qm-muzukaliti-split-row:not(:has(.qm-muzukaliti-split-media img)) > .qm-muzukaliti-split-copy,
.qm-nazad90 .qm-nazad90-split-row:not(:has(.qm-nazad90-split-media img)) > .qm-nazad90-split-copy,
.qm-standup .qm-standup-split-row:not(:has(.qm-standup-split-media img)) > .qm-standup-split-copy,
[class*="__media-row--no-media"] > [class*="__media-copy"],
[class*="-split__row--no-media"] > [class*="-split__copy"],
.qm-gamepage__split-row--no-media > .qm-gamepage__split-copy {
flex: 0 0 100%;
max-width: 100%;
grid-column: 1 / -1;
}
/* --- 14.1. «Плитка 4 маленьких» и на телефоне (владелец, 11.09): широкая
ячейка на <576px больше не занимает строку целиком (п.7, 8, 9.2) —
такая же плитка 2:3 с боковым срезом, как у соседей. Дублирует п.13.4
без медиазапроса; flex-значения claude1 в grid-сетке безвредны. --- */
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide,
.qm-aishow .qm-aishow-photo-link--wide,
.qm-comedyshow .qm-comedyshow-photo-link--wide,
.qm-fokusniki .qm-fokusniki-photo-link--wide,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide,
.qm-nazad90 .qm-nazad90-photo-link--wide,
.qm-standup .qm-standup-photo-link--wide,
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide,
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--wide {
grid-column: auto;
aspect-ratio: 2 / 3;
align-self: auto;
height: auto;
}
.qm-whatashow__gallery-grid > .qm-whatashow__gcell--wide > img,
.qm-neigry__gallery-grid > .qm-neigry__gcell--wide > img,
.qm-gromkiy__gallery-grid > .qm-gromkiy__gcell--wide > img,
.qm-bitvapolov__gallery-grid > .qm-bitvapolov__gcell--wide > img,
.qm-nashchupal__gallery-grid > .qm-nashchupal__gcell--wide > img,
.qm-podmoskovnye__gallery-grid > .qm-podmoskovnye__gcell--wide > img,
.qm-aishow .qm-aishow-photo-link--wide img,
.qm-comedyshow .qm-comedyshow-photo-link--wide img,
.qm-fokusniki .qm-fokusniki-photo-link--wide img,
.qm-muzukaliti .qm-muzukaliti-photo-link--wide img,
.qm-nazad90 .qm-nazad90-photo-link--wide img,
.qm-standup .qm-standup-photo-link--wide img,
.qm-karaoke-gallery__grid > .qm-karaoke-gallery__cell--wide > img,
.qm-kalyan-gallery__grid > .qm-kalyan-gallery__cell--wide > img,
.qm-vyezdnoybar-gallery__grid > .qm-vyezdnoybar-gallery__cell--wide > img,
.qm-gogo-gallery__grid > .qm-gogo-gallery__cell--wide > img,
.qm-vinokazino-gallery__grid > .qm-vinokazino-gallery__cell--wide > img,
.qm-fankazino-gallery__grid > .qm-fankazino-gallery__cell--wide > img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 28%;
}
.qm-gamepage__gallery-grid > .qm-gamepage__gcell--wide > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 28%;
}
.qm-standup #b2250 .qm-standup-photo-link--wide img { object-position: 100% 50%; }
/* --- 11.6. /standup, Эд Дородный: плитки внутри его split-блока (b3286),
справа от текста — просьба владельца 11.09 («заголовок убрать, картинки
засунуть внутрь его блока»). Партиал split при ≥2 картинках рендерит
разметку галереи; здесь — сетка 2×2 в медиа-колонке, без ограничения
высоты п.13.2 и без четырёх колонок п.12.5. --- */
.qm-standup .qm-standup-split-media:has(> .qm-standup-photos) {
max-height: none;
overflow: visible;
align-self: center;
padding: 0;
}
.qm-standup .qm-standup-split-media > .qm-standup-photos.qm-standup-photos-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: none;
margin: 0;
}
.qm-standup .qm-standup-split-media > .qm-standup-photos > .qm-standup-photo-link {
grid-column: auto;
aspect-ratio: 2 / 3;
height: auto;
width: 100%;
}
.qm-standup .qm-standup-split-media > .qm-standup-photos > .qm-standup-photo-link img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 50% 28%;
}
/* ==========================================================================
15. Пропорция плитки по факту блока — правило владельца 11.09.2026
(«фото нигде не обрезаются: либо подходящие кадры, либо отчёт»).
Партиалы галерей считают формат блока (App\Support\Qme\TileRatio: формат
из 2:3, 3:4, 1:1, 4:3, 3:2, 16:9, в который укладывается больше всего
кадров со срезом ≤12 %) и ставят на контейнер data-qm-tile + --qm-tile.
Скрипт storage/app/_orient4.php оставляет в блоке только кадры, которые в
этот формат укладываются (добор из архива владельца, иначе отчёт).
Это единственное место, где теперь задаётся пропорция ячейки: перекрывает
п.1.2, 4, 5.1, 7, 7.1, 9–11, 13.4, 14.1 сразу для всех пакетов, поэтому
с !important. Единственная растяжка ячейки — п.17 (блок из трёх кадров),
она эти обнуления перебивает специфичностью.
========================================================================== */
[data-qm-tile] > * {
aspect-ratio: var(--qm-tile) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
grid-column: auto !important;
grid-row: auto !important;
align-self: auto !important;
overflow: hidden;
}
[data-qm-tile] > * > img {
display: block;
width: 100% !important;
height: 100% !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: 50% 28%;
}
/* Единственный горизонтальный кадр среди вертикальных, оставленный по решению
владельца 11.09 (крыша в блоке Андрея, /standup): Андрей у правого края —
срез якорим вправо. */
.qm-standup #b2248 [data-qm-tile] > .qm-standup-photo-link:last-child > img {
object-position: 100% 50%;
}
/* --- 15.1. Плитки внутри блока человека (текст | 4 плитки 2×2): /standup
(Андрей, Эд) и /fokusniki (пять фокусников) — «как у Эда, везде». Колонка
плиток 40 %, текст 60 % («фотки крупноваты, чуть меньше»: 285×428 вместо
356×534 на 1440). Ширина сетки округлена вниз до чётных px — дробные
колонки (356.25px) давали тонкие швы между плитками. Ниже 768px плитки
идут под текстом сеткой 2×2 (п.11.6 остаётся для /standup). --- */
:is(.qm-standup .qm-standup-split-media, .qm-fokusniki .qm-fokusniki-split-media):has(> [data-qm-tile]) {
max-height: none;
min-height: 0;
overflow: visible;
align-self: center;
padding: 0;
}
/* [data-qm-tile][data-qm-tile] — специфичность (0,4,0), чтобы перебить п.12.5 (repeat(4) для блоков из 4). */
:is(.qm-standup .qm-standup-split-media, .qm-fokusniki .qm-fokusniki-split-media) > [data-qm-tile][data-qm-tile] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
max-width: none;
margin: 0 auto;
width: round(down, 100%, 2px);
}
@media (min-width: 768px) {
:is(.qm-standup .qm-standup-split-row, .qm-fokusniki .qm-fokusniki-split-row):has(> * > [data-qm-tile]) > :is(.qm-standup-split-media, .qm-fokusniki-split-media) {
flex: 0 0 40%;
max-width: 40%;
}
:is(.qm-standup .qm-standup-split-row, .qm-fokusniki .qm-fokusniki-split-row):has(> * > [data-qm-tile]) > :is(.qm-standup-split-copy, .qm-fokusniki-split-copy) {
flex: 0 0 60%;
max-width: 60%;
}
}
/* Блок человека с тремя кадрами: раньше здесь было «три плитки в ряд вместо
2×2 с дырой». Отменено правилом владельца 11.09.2026 (wave4, п.43) — две
колонки остаются, дыру закрывает растянутый соседний кадр (п.17.1/17.2).
Два кадра сами ложатся в один ряд. */
/* --- 15.2. Блоки человека: отступ и размер плиток.
Задача владельца 11.09.2026 (скрин /standup): «между блоками отступ
побольше, фотки поменьше, отступ сделать сепаратором — примеров на
сайте куча». Сепаратор — штатная волна сайта (type=wave), вставлена в
данные между подряд идущими блоками людей (/standup, /fokusniki).
Здесь — воздух вокруг неё и размер плиток.
Зеркальность отменена владельцем тем же днём («не зеркалить»): у всех
блоков людей `side: right`, фотографии справа на всех экранах. --- */
@media (min-width: 992px) {
/* Ширина колонки медиа. 11.09 владелец просил «фотки поменьше» — было 40 %,
стало 34 %. 12.09, посмотрев ПК: «надо больше ширины выдать» — 44 %.
Замерено на 1440: было 4 плитки в ряд по 121 px, стало 2x2 по 248 px. */
:is(.qm-standup .qm-standup-split-row, .qm-fokusniki .qm-fokusniki-split-row):has(> * > [data-qm-tile]) > :is(.qm-standup-split-media, .qm-fokusniki-split-media) {
flex: 0 0 44%;
max-width: 44%;
}
:is(.qm-standup .qm-standup-split-row, .qm-fokusniki .qm-fokusniki-split-row):has(> * > [data-qm-tile]) > :is(.qm-standup-split-copy, .qm-fokusniki-split-copy) {
flex: 0 0 56%;
max-width: 56%;
}
/* воздух между блоками людей — только внутри самой секции: волну не трогаем,
у неё в пакете margin:-2px 0 (нахлёст, чтобы не было шва) — 11.09.2026 попытка
дать ей margin-block:10px открыла щели, и в них был виден чёрный фон страницы. */
:is(.qm-standup .qm-standup-section, .qm-fokusniki .qm-fokusniki-section):is(.qm-standup-split, .qm-fokusniki-split):has(> * > .qm-row:has(> * > [data-qm-tile])) {
padding-block: 30px;
}
}
/* ==========================================================================
16. Кадр, который в плитку блока не укладывается, — срез по центру.
Эталон — блок из четырёх плиток 3:2 (/quiz, верхняя галерея). Плитка у
блока общая: иначе ряды не сходятся. Партиалы считают формат блока один
раз (TileRatio::label) и ставят на выбивающуюся ячейку `data-qm-fit`
(TileRatio::fitAttr). Специфичность (0,3,0) против (0,1,2) у п.15 — при
равном !important побеждает это правило.
История: 11.09.2026 по задаче «уменьшить фотки, но без обрезки» такой кадр
вписывался целиком (`contain`) и выходил меньше плитки. Владелец в тот же
день отменил — правило переписано на `cover`. Отличие от п.15 осталось
одно: якорь среза по центру (50% 50%), а не на 28% сверху, — кадр другой
ориентации при верхнем якоре терял низ целиком.
========================================================================== */
[data-qm-tile] [data-qm-fit] img {
object-fit: cover !important;
object-position: 50% 50% !important;
}
/* ==========================================================================
17. Три кадра в блоке — дыру закрывает растянутый соседний кадр.
Правило владельца 11.09.2026 (wave4, п.43). ОТМЕНЯЕТ п.16.1 («если кадра
нет, оставь пустое поле — я увижу и пришлю»): пустых чёрных ячеек в сетке
больше быть не должно. Требование дословно: «реализовать универсально,
чтоб не надо было точечных правок вносить».
Сетка при трёх кадрах остаётся 2×2, а направление растяжки выбирается так,
чтобы увеличенная ячейка была ближе к квадрату:
- широкая плитка (3/2, 4/3, 5/3…) — второй кадр вниз, на обе строки своей
колонки: пропорция ячейки становится tile/2 (пример владельца — /bunker);
- высокая плитка (2/3, 3/4, 5/7…) — третий кадр вправо, на обе колонки
нижней строки: пропорция становится tile×2 (пример владельца — /neigry).
Направление считает PHP (App\Support\Qme\TileRatio::gapFill по формату
плитки блока) и отдаёт маркером-ребёнком `.qm-gfill--down|--right` из
`site/partials/gallery-gaps.blade.php` — партиал рендерится уже внутри
контейнера и признак на сам контейнер поставить не может. Маркер
`display:none`, ячейкой сетки не становится; заодно он остаётся четвёртым
ребёнком, чем гасит п.6 (три кадра в один столбец) — оно тоже отменено.
Мозаика (`layout: mosaic`) размечена вручную, маркер туда не ставится.
========================================================================== */
.qm-gfill {
display: none !important;
}
/* --- 17.1. Где сетка двухколоночная, там и растягиваем: ниже 576px это все
галереи (п.1.1), плюс плитки внутри блока человека (п.15.1) — там две
колонки на всех ширинах. Флаг `--qm-gfill-span` включает растяжку: без него
ячейка остаётся обычной (span 1 и своя пропорция). --- */
@media (max-width: 575.98px) {
[data-qm-tile][data-qm-tile]:has(> .qm-gfill) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
--qm-gfill-span: 2;
}
[data-qm-tile][data-qm-tile]:has(> .qm-gfill) > *:not(.qm-gfill) {
flex: none;
width: auto;
max-width: none;
}
}
:is(.qm-standup .qm-standup-split-media, .qm-fokusniki .qm-fokusniki-split-media) > [data-qm-tile]:has(> .qm-gfill) {
--qm-gfill-span: 2;
}
/* --- 17.2. Сама растяжка. `!important` и специфичность (0,3,0) — чтобы
перебить п.15, который обнуляет grid-row/grid-column у всех ячеек с
`!important`. Пропорция растянутой ячейки считается из общей плитки блока:
при span 1 обе формулы дают ровно `var(--qm-tile)`, то есть в однорядной
раскладке ячейка ничем не отличается от соседних. --- */
[data-qm-tile]:has(> .qm-gfill--down) > *:nth-child(2) {
grid-row: span var(--qm-gfill-span, 1) !important;
aspect-ratio: calc(var(--qm-tile) / var(--qm-gfill-span, 1)) !important;
}
[data-qm-tile]:has(> .qm-gfill--right) > *:nth-child(3) {
grid-column: span var(--qm-gfill-span, 1) !important;
aspect-ratio: calc(var(--qm-tile) * var(--qm-gfill-span, 1)) !important;
}
/* --- 17.3. От 576px блок из трёх кадров идёт одним рядом из трёх — так же,
как в оригинале Bitrix (`col-12 col-sm-4`), и без дыры справа. Перебивает
п.12.5 (четыре колонки для блоков из 4 и 8: маркер считается четвёртым
ребёнком, и без этого правила блок получил бы четвёртую пустую колонку) и
пакетные `--cols-4` / `--3` / `--4`. Ячейки растягиваются поровну
(`flex: 1 1 0`), чтобы не зависеть от процентов пакета. --- */
@media (min-width: 1200px) {
[data-qm-tile][data-qm-tile]:has(> .qm-gfill) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-qm-tile][data-qm-tile]:has(> .qm-gfill) > *:not(.qm-gfill) {
flex: 1 1 0;
width: auto;
max-width: none;
}
}
/* --- 17.4. Два кадра: правила владельца нет (вопрос вынесен в отчёт).
Пока — один ряд из двух ячеек без пустот, на всех ширинах. --- */
[data-qm-tile][data-qm-tile]:has(> *:nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-qm-tile][data-qm-tile]:has(> *:nth-child(2):last-child) > * {
flex: 1 1 0;
width: auto;
max-width: none;
}
/* ==========================================================================
18. /vyezdnoj-bar — медиатека большого размера (правка владельца 11.09.2026,
wave4 п.32: «сделать медиатеку большого размера, как вторая галерея на
/go-go-tequila-girls. Сейчас сетка мелкая»).
Эталон владельца — вторая галерея /go-go-tequila-girls: на 1440 плитка
285×428. У /vyezdnoj-bar кадры горизонтальные, и при тех же четырёх
колонках плитка выходит 285×214 и 285×171 — вдвое ниже эталона. Догонять
высоту пропорцией нельзя: вертикальная плитка срезала бы горизонтальному
кадру половину (правило владельца «фото не обрезаются»). Поэтому берём
меньше колонок: две вместо четырёх, плитка 570 px по ширине и 380–428 px
по высоте — та же величина, что в эталоне, без обрезки.
Пространство имён `qm-vyezdnoybar-*` пакета cursor1 живёт только на этой
странице, так что правило страницей и ограничено.
`--qm-gfill-span: 2` — сетка здесь двухколоночная на всех ширинах, поэтому
блок из трёх кадров закрывает дыру по общему правилу п.17, а не уходит
в три колонки (п.17.3).
========================================================================== */
@media (min-width: 576px) {
.qm-vyezdnoybar-gallery__grid[data-qm-tile][data-qm-tile] {
grid-template-columns: repeat(2, minmax(0, 1fr));
--qm-gfill-span: 2;
}
}
/* ==========================================================================
19. Блоки людей на ПК: сетка сайта, симметричные поля, плитка 2x2.
Правка владельца 12.09.2026 (wave5, пп. 61–63, скриншоты /standup и
/fokusniki на 1920): «исправить на ПК версии галерею, стендаперов всех.
Надо больше ширины выдать и выровнять отступы слева и справа, сделать
чтоб виджет соцсетей не перекрывал» и «блоки, которые в упор к краю экрана
прилегают, всем добавить отступы по краям красиво».
Что было замерено на 1440 до правки: ряд блока шёл 0 → 1425, то есть в
край с обеих сторон; текст начинался с 50 px, а сетка фотографий упиралась
в правый край страницы. Плавающий виджет мессенджеров `.qme-float` занимает
1305 → 1417, поэтому он ложился прямо на кадры. Сами кадры при этом шли
одним рядом по 121 px: блок из 4 кадров попадал под п.12.5 (четыре колонки
на десктопе) — правило писалось для полноширинных галерей, а внутри узкой
колонки медиа оно даёт микроплитки.
Решение: блок человека живёт в той же сетке, что остальной сайт
(`.qm-container`: 960 от 992 px, 1140 от 1200 px, поля по 15 px). Правый
край ряда уходит на 1283 — левее виджета, перекрытия нет, поля слева и
справа равны. Внутри колонки медиа плитка всегда 2x2.
========================================================================== */
@media (min-width: 992px) {
:is(.qm-standup .qm-standup-split-container, .qm-fokusniki .qm-fokusniki-split-container) {
max-width: 960px;
margin-inline: auto;
}
/* Плитка блока человека — всегда две колонки: перебивает п.12.5
(`repeat(4)` для блоков из 4 и 8 кадров), специфичность (0,5,0). */
.qm-standup .qm-standup-split-media > .qm-standup-photos[data-qm-tile][data-qm-tile],
.qm-fokusniki .qm-fokusniki-split-media > .qm-fokusniki-photos[data-qm-tile][data-qm-tile] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
:is(.qm-standup .qm-standup-split-container, .qm-fokusniki .qm-fokusniki-split-container) {
max-width: 1140px;
}
}
/* ==========================================================================
20. Планшет: галереи в две колонки. Правка владельца 12.09.2026
(wave5, пп. 54–56): «на этой странице сделаны эталонные блоки галереи для
адаптива под планшеты, так же делать везде» — эталон /vyezdnoj-bar,
плюс «исправить планшетный адаптив» главной и /standup.
Замерено на 1024 до правки: главная давала ряд из четырёх плиток 240x160,
а эталонная медиатека /vyezdnoj-bar — две по 480x343. Разнобой шёл от п.12.5
(четыре колонки от 992 px) и п.17.3 (ряд из трёх от 576 px): оба правила
писались под десктоп. Их пороги подняты до 1200 px, а весь диапазон
576–1199 отдан этому правилу — две колонки, как в эталоне.
`--qm-gfill-span: 2` — сетка здесь двухколоночная, значит блок из трёх
кадров закрывает дыру растяжкой по п.17, а не уходит в три колонки.
Третий `[data-qm-tile]` в селекторе — чтобы перебить пакетные
`-photos-3 / -photos-4 / --cols-N` (специфичность 0,2,0).
========================================================================== */
@media (min-width: 576px) and (max-width: 1199.98px) {
[data-qm-tile][data-qm-tile][data-qm-tile] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
--qm-gfill-span: 2;
}
[data-qm-tile][data-qm-tile][data-qm-tile] > *:not(.qm-gfill) {
flex: none;
width: auto;
max-width: none;
}
}