/* contact — the page's own layout: the two parts and the form beside them. Only here, only on this page. */

/* Reach-now and reference on the left, the form on the right; on a phone reach-now, the form, the reference.
   The contacts' wrapper steps aside (display: contents, contacts.css) so its two parts take places in this grid. */
.contact-layout { display: grid; gap: 2rem; grid-template-areas: "quick" "form" "info"; }
.contact-layout__form { grid-area: form; min-width: 0; }
.contact-layout--form-only { max-width: calc(44rem + 48px); grid-template-areas: "form"; }
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "quick form" "info form"; gap: 2rem 3.5rem; align-items: start; }
  .contact-layout--form-only { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "form"; }
}