/* ============================================================
   WMC House — gallery
   Replaces FooGallery. No script, no lightbox library.
   Asymmetric by design: 4/2 then 2/2/2, never a uniform row.
   ============================================================ */

/* === Grid === */
.gal { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.5rem, 1vw, 1rem); }
.gal figure { overflow: hidden; background: var(--dark); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal figure:hover img { transform: scale(1.05); }

/* === Placement === */
.gal__g1 { grid-column: span 4; aspect-ratio: 3 / 2; }
.gal__g2 { grid-column: span 2; aspect-ratio: 3 / 4; }
.gal__g3 { grid-column: span 2; aspect-ratio: 1; }
.gal__g4 { grid-column: span 2; aspect-ratio: 1; }
.gal__g5 { grid-column: span 2; aspect-ratio: 1; }

/* === Breakpoint === */
@media (max-width: 760px) {
.gal { grid-template-columns: repeat(2, 1fr); }
.gal__g1, .gal__g2, .gal__g3, .gal__g4, .gal__g5 { grid-column: span 1; aspect-ratio: 1; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) { .gal img { transition: none; } .gal figure:hover img { transform: none; } }