/* These banners include their own fade and text-safe area. */
.sec-hero.sec-hero--banner,
.sec-salud-hero--banner {
  background: #fff;
}
.sec-hero.sec-hero--banner .sec-hero-bg,
.sec-salud-hero--banner .sec-salud-hero-media {
  width: 100%;
}
.sec-hero--banner .sec-hero-bg::after,
.sec-salud-hero--banner .sec-salud-hero-media::after {
  display: none;
}
.sec-hero--banner .sec-hero-bg img,
.sec-salud-hero--banner .sec-salud-hero-media img {
  object-position: right center;
}

.sec-hero--banner.sec-hero--sol {
  background: #102f50;
}
.sec-hero--banner.sec-hero--sol .eyebrow,
.sec-hero--banner.sec-hero--sol h1,
.sec-hero--banner.sec-hero--sol p {
  color: #fff;
}

/* Show the artwork above the text when the two no longer fit side by side.
   The right half contains the subjects; the left half is the built-in fade. */
@media (max-width: 1024px) {
  .sec-salud-hero--banner .sec-salud-hero-media {
    position: relative;
    height: clamp(240px, 38vw, 360px);
    overflow: hidden;
  }
  .sec-salud-hero--banner .sec-salud-hero-media img {
    width: 200%;
    max-width: none;
    margin-left: -100%;
    object-position: right 30%;
  }
}
@media (max-width: 1024px) {
  .sec-hero.sec-hero--banner {
    display: block;
    min-height: 0;
  }
  .sec-hero.sec-hero--banner .sec-hero-bg {
    position: relative;
    height: clamp(220px, 45vw, 340px);
    opacity: 1;
    overflow: hidden;
  }
  .sec-hero--banner .sec-hero-bg img {
    width: 200%;
    max-width: none;
    margin-left: -100%;
    object-position: right 30%;
  }
  .sec-hero--banner .sec-hero-inner {
    padding-block: var(--sp-10);
  }
  .sec-hero--banner .sec-hero-text {
    max-width: 100%;
  }
}