/* gallery — стили вариантов группы; см. начало site/site.css */

/* Общее: .gal-item — фото-ссылка с подписью */
.gal-item { margin: 0; }
.gal-item a { display: block; overflow: hidden; border-radius: var(--radius); background: var(--s-surface); border: 1px solid var(--s-line); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gal-item a:hover img { transform: scale(1.04); }
.gal-item figcaption { font-size: 13px; color: var(--s-muted); margin-top: 8px; overflow-wrap: anywhere; }

/* grid — ровные квадраты */
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.gal-grid .gal-item a { aspect-ratio: 1; }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* masonry — колонки, фото разной высоты (естественные пропорции) */
.gal-masonry { column-count: 3; column-gap: 16px; margin-top: 24px; }
.gal-masonry .gal-item { break-inside: avoid; margin-bottom: 16px; }
.gal-masonry .gal-item img { height: auto; }
@media (max-width: 900px) { .gal-masonry { column-count: 2; } }
@media (max-width: 360px) { .gal-masonry { column-count: 1; } }

/* strip — горизонтальная лента на всю ширину, scroll-snap */
.gal-strip {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 24px 5% 14px; scroll-padding-left: 5%; scrollbar-width: thin;
}
.gal-strip .gal-item { flex: 0 0 min(320px, 78%); scroll-snap-align: start; }
.gal-strip .gal-item a { aspect-ratio: 4 / 5; }