/* Keep captions beneath the photograph, using the same width and center. */
.prose figure:has(> figcaption) > picture {
  display: block;
}

.prose figure:has(> figcaption) > p:has(> img) {
  margin-bottom: 0;
}

.prose figure:has(> figcaption) img {
  display: block;
  margin-bottom: 0;
}

.prose figure > figcaption {
  width: 100%;
  max-width: 100%;
  margin: 8px auto 0;
  text-align: center;
  font-size: calc(1em - 2px) !important;
}

.prose .img-square figcaption {
  width: 60%;
}

.prose .img-portrait figcaption {
  width: 72%;
}

/* Shared article photo limits; mobile image widths remain unchanged. */
@media (min-width: 768px) {
  .prose img {
    display: block;
    max-width: min(100%, 600px);
    margin-inline: auto !important;
  }

  .prose img[data-article-photo="compact"],
  .prose .img-square img,
  .prose .img-portrait img {
    max-width: min(100%, 400px);
  }

  .prose figure > figcaption {
    max-width: min(100%, 600px);
  }

  .prose figure:has(img[data-article-photo="compact"]) > figcaption,
  .prose .img-square figcaption,
  .prose .img-portrait figcaption {
    max-width: min(100%, 400px);
  }
}

/* Separate each captioned photograph or gallery from the following text. */
.prose figure:has(> figcaption) {
  margin-bottom: 32px !important;
}

.prose .image-grid figure:has(> figcaption) {
  margin-bottom: 0 !important;
}

.prose .image-grid:has(figcaption) {
  margin-bottom: 32px !important;
}