/* Contact: one centred column — hero, intro, then a block per address. */

.contact {
  text-align: center;
  padding-bottom: var(--space-6);
}

.contact__hero {
  display: block;
  width: 94%; /* 342px of a 405 design screen */
  max-width: 30.25rem; /* 484px — the desktop size of the drawing */
  height: auto;
  margin: 1.5rem auto 0;
}

.contact__intro,
.contact__channel {
  max-width: 45em; /* 1080px at the desktop body size */
  margin-inline: auto;
  line-height: 1.3;
  font-size: var(--text-ui);
}

.contact__intro {
  margin-top: 2.5rem;
}

.contact__channel {
  margin-top: 3rem;
}

.contact__channel-image {
  display: block;
  width: 9.25rem; /* 148px */
  height: auto;
  margin: 0 auto 2.25rem;
}

.contact__heading {
  font-size: var(--text-heading);
  font-weight: var(--weight-extrabold);
}

.contact__text {
  font-weight: var(--weight-medium);
}

.contact__email {
  font-size: var(--text-body);
  font-weight: var(--weight-black);
}

.contact__email a {
  color: var(--accent-red);
  text-decoration: none;
}

.contact__email a:hover,
.contact__email a:focus-visible {
  text-decoration: underline;
}

.contact__note {
  margin-top: 3.5rem;
}

@media (min-width: 72rem) {
  .contact__hero {
    margin-top: 3.5rem;
  }

  .contact__intro,
  .contact__channel {
    font-size: var(--text-title);
  }

  .contact__intro {
    margin-top: 3rem;
  }

  .contact__channel {
    margin-top: 2.5rem;
  }

  .contact__email {
    font-size: var(--text-title);
  }
}