/* Keep the small hero caption readable over the overlapping composition. */
@media (max-width: 650px) {
  .hero-small figcaption {
    position: relative;
    z-index: 3;
    width: max-content;
    max-width: 100%;
    margin-top: 0;
    padding: 7px 7px 7px 0;
    background: var(--canvas);
  }
}

/* Show the whole supplied composition, including signatures and collage edges. */
@media (min-width: 651px) {
  .hero-small { top: 59%; }
  .hero-small img { height: clamp(190px, 20vw, 260px); }
}
.gallery-item .photo-open { aspect-ratio: var(--photo-ratio); background: #242521; }
.gallery-item .photo-open img { object-fit: contain; }
.gallery .item-wide { grid-column: 1 / -1; }
@media (max-width: 650px) {
  .gallery .item-wide { grid-column: 1 / -1; }
  .gallery .item-wide .photo-meta { flex-wrap: wrap; }
}