/* Contact page layout. */

/* Contact page sits on pale blue (header + content). */
body.page-contact { background: var(--color-pale-blue); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  padding-block: clamp(24px, 4vw, 48px) clamp(48px, 8vw, 96px);
}

.contact-title {
  color: var(--color-plum);
  font-size: var(--fs-display);
  margin: 0 0 clamp(16px, 3vw, 28px);
}

.contact-lead {
  color: var(--color-plum);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  text-align: center;
  margin: 0 0 clamp(20px, 3vw, 32px);
  max-width: none;
}

.contact-grid__media { align-self: start; }

.contact-illustration {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid__media { order: -1; }
}