/* Responsive Hero block: full-bleed, art-directed images, centered (never cropped) on a background color */
.responsive-hero {
  --responsive-hero-padding: var(--four-spacer);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* the editor has no normalize.css; keeps the padding inside the 100% width */
  width: 100%;
  padding: var(--responsive-hero-padding);
  background-color: var(--wp--preset--color--midnight);
}

@media screen and (max-width: 767px), screen and (orientation: landscape) and (max-height: 500px) {
  .responsive-hero {
    --responsive-hero-padding: var(--two-spacer);
  }
}

.responsive-hero picture {
  display: contents;
}

/* Height follows the image; capped so the whole image always fits on screen */
.responsive-hero img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 2 * var(--responsive-hero-padding));
  max-height: calc(100svh - 2 * var(--responsive-hero-padding));
}