/* Shared full-width image container. Individual pages define their own height. */
.common-page-banner {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-bottom: 1px solid var(--sjm-color-line);
}

.common-page-banner__image,
.common-page-banner__image > *,
.common-page-banner__image .field,
.common-page-banner__image .field__item,
.common-page-banner__image picture {
  display: block;
}

.common-page-banner__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* About blocks sit inside a narrow Drupal wrapper on mobile. The desktop
 * full-bleed margin is therefore calculated from the wrong containing width
 * and pushes the image out of the viewport. Page-owned height stays untouched. */
@media (max-width: 47.9375rem) {
  .common-page-banner {
    margin-inline: 0;
  }
}