/* Ported unchanged from the prototype: dist/gallery.css. */
/* Full photographic rows, in reading and keyboard order. */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(340px, 34vw, 480px);
  grid-auto-flow: row;
  gap: 22px;
}
.showcase-grid > .showcase-piece {
  grid-column: span 2;
  height: 100%;
  min-width: 0;
}
.showcase-grid > .showcase-piece:where(:first-child) { grid-column: span 4; }
/* After the opening pair, distribute a final pair evenly or give a lone
   final piece a complete row. No repeated oversized cards or empty cells. */
.showcase-grid > .showcase-piece:where(:nth-child(3n):nth-last-child(2), :nth-child(3n):nth-last-child(2) + .showcase-piece) {
  grid-column: span 3;
}
.showcase-grid > .showcase-piece:where(:nth-child(3n):last-child, :only-child) { grid-column: span 6; }
.showcase-grid .showcase-caption { overflow-wrap: anywhere; }
.showcase-grid .showcase-caption strong { font-size: clamp(30px, 3vw, 43px); }
.showcase-grid > .showcase-piece:first-child .showcase-caption strong {
  font-size: clamp(38px, 4vw, 56px);
}
@media (max-width: 1000px) {
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 360px; gap: 16px; }
  .showcase-grid > .showcase-piece:nth-child(n) { grid-column: span 1; }
  .showcase-grid > .showcase-piece:first-child,
  .showcase-grid > .showcase-piece:nth-child(even):last-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .showcase-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 350px; gap: 18px; }
  .showcase-grid > .showcase-piece:nth-child(n) { grid-column: span 1; }
  .showcase-grid .showcase-caption { left: 22px; right: 22px; bottom: 25px; }
  .showcase-grid .showcase-caption strong { font-size: 34px; }
  .showcase-grid > .showcase-piece:first-child .showcase-caption strong { font-size: 40px; }
}