.gallery__title {
margin-bottom: 8px;
}

.gallery__description {
margin-bottom: 16px;
}

.gallery__track {
position: relative;
}

/* Splide прячет .splide (visibility:hidden) до своей инициализации --
если его JS по какой-то причине не выполнится (сбой сети, отключён
JS), галерея с раскладкой "карусель" не должна пропадать: явно
возвращаем видимость, Splide сам переключит на плавное появление
после успешного mount() через класс is-initialized. */
.gallery--carousel.splide {
visibility: visible;
}

.gallery--grid .gallery__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}

.gallery--masonry .gallery__list {
position: relative;
}

.gallery--masonry .gallery__list::after {
content: "";
display: table;
clear: both;
}

.gallery--masonry .gallery__item {
float: left;
width: calc(25% - 12px);
margin: 0 16px 16px 0;
}

/* Карусель: раскладку целиком отдаём CSS самого Splide (splide.min.css) --
здесь НЕ переопределяем display/flex-wrap/ширину элементов. Splide
жёстко рассчитывает на display:flex БЕЗ переноса строк (одна лента,
которая двигается по горизонтали) -- flex-wrap здесь ломает саму
механику слайдера и заодно показывает служебные клоны, которые Splide
создаёт для бесконечной прокрутки (loop). */

.gallery__item {
position: relative;
}

.gallery__link {
display: block;
position: relative;
overflow: hidden;
border-radius: 6px;
background-color: #f2f2f0;
}

.gallery__media {
display: block;
width: 100%;
object-fit: cover;
}

/* Сетка и карусель -- одинаковая высота карточек (аккуратные ряды).
Кирпичная кладка -- специально БЕЗ фиксированного соотношения сторон:
только так у карточек получаются разные высоты и Macy.js их реально
укладывает "кирпичиками", а не строит ту же сетку другими словами. */
.gallery--grid .gallery__media,
.gallery--carousel .gallery__media {
height: 100%;
aspect-ratio: 4 / 3;
}

.gallery--masonry .gallery__media {
height: auto;
}

/* Видео -- всегда с разумным ограничением высоты, независимо от схемы:
у него, в отличие от фото, естественный размер может быть каким угодно
(до загрузки метаданных браузер может показать его ещё крупнее) --
из-за этого видео однажды наехало на подвал сайта в кладке, где высота
не ограничена специально ради самих фото. */
.gallery--masonry video.gallery__media {
max-height: 480px;
object-fit: cover;
}

.gallery__play {
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.55);
}

.gallery__play::after {
content: "";
position: absolute;
top: 50%;
left: 54%;
width: 0;
height: 0;
margin: -9px 0 0 -6px;
border-style: solid;
border-width: 9px 0 9px 14px;
border-color: transparent transparent transparent #fff;
}

.gallery__caption {
margin-top: 6px;
font-size: 13px;
color: #555;
}

.gallery-index {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.gallery-index__item {
display: block;
color: inherit;
text-decoration: none;
}

.gallery-index__cover {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 6px;
}

.gallery-index__name {
margin-top: 6px;
font-size: 14px;
}

/* Mobile: до 576px (1-2 колонки) */
@media (max-width: 576px) {
.gallery--grid .gallery__list {
grid-template-columns: repeat(2, 1fr);
}
.gallery--masonry .gallery__item {
width: calc(50% - 8px);
}
.gallery-index {
grid-template-columns: repeat(2, 1fr);
}
}

/* Tablet: 577-991px (2-3 колонки) */
@media (min-width: 577px) and (max-width: 991px) {
.gallery--grid .gallery__list {
grid-template-columns: repeat(3, 1fr);
}
.gallery--masonry .gallery__item {
width: calc(33.333% - 11px);
}
}

.gallery__pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}

.gallery__page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
color: inherit;
}

.gallery__page-link--current {
background-color: #333;
color: #fff;
border-color: #333;
}