/* contact — was contact.module.css. The bundler's hashed class names are
   replaced by a plain p-contact_ prefix so the stylesheet stands alone. */

.p-contact_page {
  position: relative;
  width: 100%;
  background-color: var(--base-100);
  color: var(--base-1000);
}

.p-contact_hero {
  position: relative;
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--base-200);
  color: var(--base-1000);
}

.p-contact_hero h1 {
  position: relative;
  width: min(35%, 50rem);
  text-align: center;
}

.p-contact_callout {
  z-index: 10;
}

.p-contact_sectionNav,
.p-contact_sectionFooter {
  position: absolute;
  left: 0;
  width: 100%;
}

.p-contact_sectionNav {
  top: 0;
}

.p-contact_sectionFooter {
  bottom: 0;
}

@media (max-width: 1000px) {
  .p-contact_hero h1 {
    width: min(90%, 50rem);
  }

  .p-contact_callout {
    display: none;
  }
}