/* Gallery.
   .gallery-grid, .gallery-wide, .gallery-caption, .gallery-feature – image grids and feature rows */
@layer components {
  .gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .gallery-grid > * { min-inline-size: 0; }
  .gallery-wide { grid-column: span 2; }
  .gallery-wide .media { --media-ratio: 8 / 3; }
  .gallery-caption { padding-block-start: 1.2rem; }
  .gallery-caption p { text-wrap: pretty; }
  .gallery-caption h3 { font-size: 2.2rem; }
  .gallery-feature { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: center; }
  .gallery-feature > * { min-inline-size: 0; }
  @media (width <= 50em) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-wide .media { --media-ratio: 16 / 9; }
    .gallery-feature { grid-template-columns: minmax(0, 1fr); }
  }
}