/* First section: it offsets the fixed header itself, as Contacts. */
.about-hero {
  padding-top: calc(var(--header-height) + var(--gap-header-to-hero));
  padding-inline: var(--section-padding-x);
  padding-bottom: 100px; /* her 100 to the facts below */
}
@media (max-width: 988px) {
  .about-hero {
    padding-top: calc(var(--header-height-mobile) + var(--gap-header-to-hero));
    padding-inline: var(--section-padding-x-mobile);
  }
}
/* Same height and radius as `.hero-card`; keep in step with it. Stacked,
   the photo takes its own ratio instead of the card's thin strip. */
.about-hero__card {
  height: min(calc(28.47vw / var(--zoom)), 410px);
  border-radius: var(--radius-big);
  overflow: hidden;
}
@media (max-width: 988px) {
  .about-hero__card { border-radius: var(--radius-big-mobile); }
}
@media (max-width: 799.98px) {
  .about-hero__card {
    height: auto;
    aspect-ratio: 2000 / 1333;
  }
}
.about-hero__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}