/* Editorial bento: tiles of different widths share a row height; each shows the screenshot with a chosen focus (--pos). */
.gallery__grid { display: grid; gap: clamp(28px, 4vw, 56px) clamp(16px, 2vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .gallery__grid { grid-template-columns: repeat(12, 1fr); }
  .gal--5 { grid-column: span 5; }
  .gal--6 { grid-column: span 6; }
  .gal--7 { grid-column: span 7; }
}

.gal { margin: 0; }
.gal__shot {
  position: relative; overflow: hidden;
  height: clamp(240px, 28vw, 380px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #050506;
  box-shadow: var(--shadow-soft);
}
.gal__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  transform: scale(1.004); /* hides the screenshot's own 1px edge */
  transition: transform 1.4s var(--ease);
}
.gal__shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.gal:hover .gal__shot img, .gal:focus-within .gal__shot img { transform: scale(1.04); }

.gal figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: baseline; margin-top: var(--space-4); }
.gal__n { grid-row: span 2; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.1em; padding-top: 3px; }
.gal figcaption strong { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; letter-spacing: -0.01em; line-height: 1.1; }
.gal figcaption span:not(.gal__n) { grid-column: 2; color: var(--muted); font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  .gal__shot img { transition: none; }
  .gal:hover .gal__shot img { transform: scale(1.004); }
}