/* hero-banner-md-height — new modifier, appended only, no existing rules
   changed. Figma (Approved Design_Keythemes, node 2011:272) specs a fixed
   600px banner height vs. the default viewport-relative --banner-height.
   Wins by specificity (2 classes > 1), no !important needed. */
.hero-banner-module.hero-banner-md-height {
  --banner-height: 600px;
}

.hero-banner-module.hero-banner-md-height .hero-text.hero-content-left {
  min-height: auto;
}

.hero-banner-module.hero-banner-md-height .hero-image:after {
  opacity: 1;
}

/* Below 991px the layout already stacks image below content (hero-banner-
   max-991.css), so the desktop 600px is no longer the right number. */
@media (max-width: 991px) {
  .hero-banner-module.hero-banner-md-height {
    --banner-height: 500px;
  }
}

@media (max-width: 767px) {
  .hero-banner-module.hero-banner-md-height {
    --banner-height: 400px;
  }
}