/* The main MOW banner is an ordinary image in every viewport, never CSS-only. */
#mow-main-banner {
  display: block;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background-image: none;
}
#mow-main-banner picture,
#mow-main-banner picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  object-fit: contain;
  filter: none;
}
body:not(.high-contrast) #mow-main-banner {
  background-image: none;
}
@media (max-width: 600px) {
  .mow-hero > .wrap { display: flex; flex-direction: column; }
  .mow-heading { order: -1; }
}

/* The original large MOW banner is the first visible element on every screen. */
.mow-masthead { padding-block: 14px 20px; background: linear-gradient(135deg, #f4fbff, #d3e8f5); }
.mow-masthead #mow-main-banner { margin: 0; }
.high-contrast .mow-masthead { background: #000; }
@media (max-width: 600px) {
  .mow-masthead { padding-block: 10px 16px; }
}