.yes-image-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  width: calc(100% - 1px); /* el banner nativo mide 1px menos que su .container */
  min-height: 520px;
  margin: 24px auto 80px;
  overflow: hidden;
  color: #F9F5EF;
  font-family: var(--body-font, "Montserrat", sans-serif);
  background: #5C4336;
}

.yes-image-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 7vw, 96px);
}

.yes-image-hero__eyebrow { margin: 0 0 18px; color: #E8DBD1; font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.yes-image-hero__content h2 { max-width: 11ch; margin: 0; font-family: var(--heading-font, "Montserrat", sans-serif); font-size: clamp(38px, 5vw, 66px); font-weight: 400; line-height: 1; text-wrap: balance; }
.yes-image-hero__content > p:not(.yes-image-hero__eyebrow) { max-width: 38ch; margin: 20px 0 0; color: #FAEFE3; font-size: 15px; line-height: 1.6; }
.yes-image-hero__cta { display: inline-flex; width: fit-content; min-height: 48px; align-items: center; justify-content: center; margin-top: 28px; padding: 12px 22px; color: #5C4336; background: #F9F5EF; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.yes-image-hero__cta:hover { color: #5C4336; background: #E8DBD1; }
.yes-image-hero__picture { position: relative; display: block; min-width: 0; min-height: 520px; overflow: hidden; background: #FAEFE3; }
.yes-image-hero__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.yes-image-hero__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (max-width: 960px) and (min-width: 768px) {
  .yes-image-hero { min-height: 460px; }
  .yes-image-hero__content { padding: clamp(28px, 4vw, 48px); }
  .yes-image-hero__content h2 { font-size: clamp(34px, 4.2vw, 48px); }
  .yes-image-hero__picture { min-height: 460px; }
}

@media (max-width: 767px) {
  .yes-image-hero { grid-template-columns: 1fr; width: calc(100% - 1px); min-height: 0; margin: 0 auto 56px; }
  .yes-image-hero__content { padding: 42px 24px; }
  .yes-image-hero__content h2 { max-width: 12ch; font-size: clamp(38px, 10vw, 54px); }
  .yes-image-hero__picture { min-height: 0; aspect-ratio: 4 / 5; }
}