/*
 * Галерея монтажа (.montage-gallery) — flex → CSS Grid auto-fill.
 *
 * Используется в taxonomy-cat-product.php и pages/montage-page.php.
 * Парент держит flex с max-width: 21.6% / 30% через nth-child(8n+3, 8n+6) —
 * на промежуточных вьюпортах ряд не добирается до конца контейнера,
 * остаются пустоты по бокам.
 *
 * Заменяем на grid с `auto-fill, minmax(240px, 1fr)` — карточки сами
 * подстраиваются под ширину. Десктоп (≥1000px) капнут до 4 колонок явно,
 * чтобы на широких мониторах не уходило в 5-6.
 *   ≥1000px → 4 в ряд (cap)
 *   720-999 → 3 в ряд
 *   480-719 → 2 в ряд
 *   <480px  → 1 в ряд
 *
 * aspect-ratio: 4/3 фиксирует пропорции, чтобы тайлы выглядели одинаково
 * на всех ширинах (object-fit: cover внутри).
 *
 * Загружается deferred — секция в самом низу шаблона (line 480/618).
 */

.montage-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    /* отменяем парент flex */
    flex-wrap: initial;
}

/* Cap до 4 колонок на десктопе. minmax(240px, 1fr) сам бы дал 5-6 на
 * широких мониторах (1440+) — явно фиксируем максимум. */
@media (min-width: 1000px) {
    .montage-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Снимаем парент max-width: 21.6% / 30% / 50% / calc() из всех media-queries,
 * перечисляем те же селекторы что и в parent style.css 3961-4004. */
.item-montage-gallery,
.item-montage-gallery:nth-child(8n + 3),
.item-montage-gallery:nth-child(8n + 6) {
    width: auto;
    max-width: unset;
}

.item-montage-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}