/* Static masonry: stable order and bounded variations, no layout script. */
.art-gallery {
  width: min(calc(100% - 2rem), 1180px);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}
.art-gallery__intro {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  text-align: center;
  text-wrap: pretty;
}
.art-gallery__masonry {
  columns: 4 224px;
  column-gap: clamp(1rem, 2.4vw, 2rem);
}
.gallery-piece {
  break-inside: avoid;
  width: 100%;
  min-width: min(100%, 176px);
  max-width: 304px;
  margin: 0 auto clamp(1.2rem, 3.2vw, 2.6rem);
  padding: 0;
}
.gallery-piece--small { width: 82%; }
.gallery-piece--medium { width: 92%; }
.gallery-piece--start { margin-left: 0; }
.gallery-piece--end { margin-right: 0; }
.gallery-piece a { display: block; border-radius: 6px; }
.gallery-piece img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 432px;
  object-fit: contain;
  border-radius: 4px;
}
.gallery-piece a:focus-visible {
  outline: 3px solid var(--color-brown);
  outline-offset: 6px;
}
@media (max-width: 600px) {
  .art-gallery__masonry { columns: 1; }
  .gallery-piece { max-width: 288px; }
}