/* Lead photo at the top of a page: ![..](..){ .lead } */
img.lead {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: .5rem;
  margin: 0 0 1.25rem;
}

/* Photo grid: <div class="gallery" markdown> ... </div>
   2 columns on phones, 3 from tablet up. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 1rem 0 1.5rem;
}
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
.gallery p { display: contents; }   /* markdown wraps each image in <p> */
.gallery a { display: block; }
.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: .5rem;
}