.poster-card {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

/* Цена */
.poster-card__price-wrapper {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.poster-card__price {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-green);
}

.price-currency {
    font-size: 16px;
}

.poster-card__price-old {
    font-size: 14px;
    color: var(--color-black-50);
    text-decoration: line-through;
}

.poster-card__price-old .price-currency {
    font-size: 14px;
}

/* Изображение */
.poster-card__image-wrapper {
    position: relative;
}
/*
    КАРТИНА ПОКАЗЫВАЕТСЯ ЦЕЛИКОМ, В СВОИХ ПРОПОРЦИЯХ. 03.09.2026.

    Владелец: «почему картина вертикальная, и она срезана и стала
    горизонтальной», «в папке сайта у меня показывались и вертикальные
    и горизонтальные вразнобой, как есть, не режа».

    [ФАКТ] Было object-fit: cover в рамке постоянной высоты 200 px.
    Замерено на боевом 03.09.2026 на картине «Чаровница» (427x640):
    в карточке 237x200 было видно 56 % — срезалось 44 %, пропадала
    голова. Вертикальных картин в базе 2 804 из 16 216.

    [ФАКТ] В старом сайте (сайт картины/cx10011) карточки шли
    masonry-сеткой, а у картинки стояло max-height: 200px — без обрезки,
    высота у карточек разная. Повторяем это же, без библиотеки:
    ширина по картинке, высота не больше 200 px, ничего не режем.

    Рамка обжимается по картинке (align-self: center у колонки карточки).
    Это важно: наложение раскладки на карточках модульных картин
    растянуто по рамке, и если рамка окажется шире картинки,
    раскладка съедет вбок.
*/
.poster-card__image-wrapper {
    position: relative;
    align-self: center;
    max-width: 100%;
    /* убирает щель под картинкой, которую даёт строчный контекст */
    line-height: 0;
}
.poster-card__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 200px;
    height: auto;
}
.poster-card__image-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Название */
.poster-card__name {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    height: 44px;
    word-break: break-all;
}

/* Кнопка */
.poster-card__button {
    --height: 44px;
    margin-top: 20px;
    width: 100%;
    height: var(--height);
    border: 1px solid var(--color-primary);
    padding: 10px;
    border-radius: calc(var(--height) / 2);
    background-color: transparent;
    color: var(--color-black);
    transition: 0.3s;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.poster-card__button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/*
    Карточка на телефоне: две в ряд, ширина около 165 пикселей.
    При шрифте 16 подпись кнопки «Конструктор заказа» переносилась
    на две строки и карточки шли вразнобой. 13 пикселей хватает,
    чтобы она встала в строку.
*/
@media screen and (max-width: 904px) {
    .poster-card__button {
        font-size: 13px;
        padding: 9px 6px;
    }

    .poster-card__name {
        font-size: 14px;
    }
}