/* Stretches banner edge-to-edge and scales height proportionally so nothing crops */
.hero-layout header.banner,
.hero-layout header[data-component="banner"] {
  min-height: 22vw !important;
  height: auto !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #FFFFFF !important;
}

.hero-layout header.banner > div,
.hero-layout header.banner::before {
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.hero-layout header.banner img {
  width: 100% !important;
  height: auto !important;
  object-fit: fill !important;
}