/* ==========================================================
   Блок плакатов
   ========================================================== */

#site-posters {
    width: 100%;
    margin: 32px 0;
}


/* Заголовок */

.site-posters-title {
    margin: 0 0 24px 0;

    font-size: 28px;
    line-height: 1.2;

    font-weight: 600;

    text-align: center;
}


/* Список */

.site-posters-list {
    display: flex;

    flex-direction: column;

    gap: 32px;

    width: 100%;
}


/* Карточка */

.site-poster {
    width: 100%;
}


/* Ссылка */

.site-poster-link {
    display: block;

    width: 100%;
}


/* Изображение */

.site-poster-image {
    display: block;

    /*
     * Ограничиваем максимальный размер плаката.
     * На большом экране он не будет растягиваться
     * на всю ширину страницы.
     */
    width: 100%;
    max-width: 800px;

    /*
     * Высота рассчитывается автоматически,
     * поэтому пропорции PNG сохраняются.
     */
    height: auto;

    /*
     * Центрируем плакат.
     */
    margin: 0 auto;

    /*
     * Небольшое скругление углов.
     */
    border-radius: 8px;

    /*
     * Курсор показывает, что по плакату можно кликнуть.
     */
    cursor: pointer;

    /*
     * Небольшой эффект при наведении.
     */
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Эффект наведения */

.site-poster-link:hover .site-poster-image {
    transform: scale(1.01);

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15);
}


/* Название */

.site-poster-title {
    margin-top: 12px;

    font-size: 18px;

    line-height: 1.4;

    text-align: center;
}


/* ==========================================================
   Мобильные устройства
   ========================================================== */

@media (max-width: 768px) {

    #site-posters {
        margin: 24px 0;
    }

    .site-posters-title {
        font-size: 24px;
    }

    .site-poster-title {
        font-size: 16px;
    }

}