/*
    ПОХОЖИЕ КАРТИНЫ. Добавлено 05.09.2026.

    Блок стоит в сетке страницы конструктора, поэтому растянут на всю
    ширину: без этого он сел бы в левую колонку шириной 320 пикселей,
    как это уже случилось с описанием картины 05.09.2026.

    Карточки те же, что в каталоге, — свои стили у них уже есть
    (components/posters/poster-card.css). Здесь только сетка и заголовок.
*/

.similar-posters {
    grid-column: 1 / -1;
}

.similar-posters__title {
    margin: 0 0 18px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-black);
}

.similar-posters__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media screen and (max-width: 1200px) {
    .similar-posters__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*
    На телефоне две в ряд и промежутки меньше — теми же значениями,
    что и в каталоге, чтобы подборка не выглядела чужой.
*/
@media screen and (max-width: 904px) {
    .similar-posters__title {
        font-size: 22px;
    }

    .similar-posters__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media screen and (max-width: 420px) {
    .similar-posters__list {
        gap: 12px;
    }
}