/* ============================================================
   Блок «Фотогалерея» (fslightbox)
   ============================================================ */

@layer components {

  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
  .gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-3);
    overflow: hidden;
    background: var(--accent-soft);
  }
  .gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.2s ease;
  }
  .gallery__item:hover img {
    transform: scale(1.05);
    opacity: 0.9;
  }
  .gallery__item:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  @media (min-width: 640px) {
    .gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
    .gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }
    .gallery--cols-6 { grid-template-columns: repeat(6, 1fr); }
  }
}