/* ============================================
   ГАЛЕРЕЯ — сетка с фото
   ============================================ */

/* Контейнер секции галереи */
.gallery {
  margin: 20px 0; /* Отступы сверху и снизу — 20px */
}

/* Сетка — адаптивная, колонки появляются сами */
.gallery-grid {
  display: grid; /* Создаём grid-контейнер */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
  /* 
    auto-fill — автоматически создаёт колонки
    minmax(200px, 1fr) — минимальная ширина 200px, максимальная — 1 часть от свободного места
  */
  gap: 8px; /* Расстояние между элементами — 8px */
}

/* Карточка с фото */
.gallery-item a {
  display: block; /* Блочный элемент — занимает всю ширину родителя */
  overflow: hidden; /* Обрезаем всё, что выходит за границы */
  border-radius: 0px; /* Углы без скругления */
  border: 2px solid transparent; /* Прозрачная рамка */
  transition: border-color 0.3s; /* Плавное изменение цвета рамки за 0.3 секунды */
}

.gallery-item a:hover {
  border-color: var(--purple); /* При наведении рамка становится фиолетовой */
}

.gallery-item img {
  width: 100%; /* Ширина 100% от родительского элемента */
  aspect-ratio: 1 / 1; /* Соотношение сторон 1:1 — квадратные изображения */
  object-fit: cover; /* Обрезаем изображение, сохраняя пропорции */
  display: block; /* Блочный элемент — убирает лишние отступы */
  transition: transform 0.3s; /* Плавная анимация трансформации */
}

.gallery-item a:hover img {
  transform: scale(1.2); /* При наведении увеличиваем изображение на 20% */
}

/* ============================================
   МИНИ-ГАЛЕРЕЯ — превью перед таблицами на прайсе
   ============================================ */

.mini-gallery .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
  /* 
    Для мини-галереи уменьшаем минимальную ширину до 150px
  */
  gap: 8px; /* Расстояние между элементами — 8px */
  margin-bottom: 16px; /* Отступ снизу — 16px */
}

.mini-gallery .gallery-item img {
  aspect-ratio: 4 / 3; /* Соотношение сторон 4:3 — прямоугольные изображения */
}