/* Approved chest-up portrait, with both faces clear of the heading. */
.bhero--family { min-height: clamp(420px, 40vw, 600px); }
.bhero--family > picture { position: absolute; inset: 0; }
.bhero--family > picture > img { object-position: right top; }
.bhero--family::after {
  background: linear-gradient(90deg, rgb(12 10 8 / .2), transparent 55%), linear-gradient(0deg, #0c0a08, transparent 25%);
  pointer-events: none;
}
.bhero--family .wrap { padding-block: clamp(40px, 5vw, 64px); }
.bhero--family h1 { max-width: 10ch; font-size: clamp(3rem, 6vw, 5.5rem); }
.bhero--family .lede { max-width: 32ch; }
@media (max-width: 767px) {
  .bhero--family { --family-photo-height: clamp(260px, 76vw, 380px); min-height: calc(var(--family-photo-height) + 220px); }
  .bhero--family > picture { bottom: auto; height: var(--family-photo-height); }
  .bhero--family > picture > img { object-position: 80% top; }
  .bhero--family > picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0c0a08, transparent 28%); }
  .bhero--family::after { background: none; }
  .bhero--family .wrap { padding-block: 28px; }
  .bhero--family h1 { max-width: 20ch; font-size: clamp(2.5rem, 8vw, 3.25rem); }
}