/* First section: it offsets the fixed header itself; the gap under it
   is the header-to-hero token, as the catalog and blog. */
.contacts {
  padding-top: calc(var(--header-height) + var(--gap-header-to-hero));
  padding-inline: var(--section-padding-x);
  padding-bottom: 20px; /* the frame's 20 between the card and the footer's */
}
@media (max-width: 988px) {
  .contacts {
    padding-top: calc(var(--header-height-mobile) + var(--gap-header-to-hero));
    padding-inline: var(--section-padding-x-mobile);
  }
}
/* The frame's picture is 460 in the 499 card — 92% of its height, the
   rest air above and below; row mode only, stacked it is whole. */
@media (min-width: 800px) {
  .contacts .hero-card__media { align-items: center; }
  .contacts .hero-card__media img { height: calc(100% * 460 / 499); }
}
/* Her 42 Regular at 1440 over the card's 50 Medium, the same 32 low
   end (recipe), and the frame's 100% line over the card's 1.3. */
.contacts .hero-card__title {
  font-weight: 400;
  font-size: clamp(32px, calc(22.541px + 1.3514vw), 42px);
  line-height: 1;
}