/* Gmail contact + centered contact section. */
#contact,
section[id="contact"],
[id="contact"] {
  min-height: clamp(34rem, 72vh, 48rem);
  display: grid !important;
  place-items: center !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  scroll-margin-top: 7rem;
  text-align: center !important;
}

#contact > *,
section[id="contact"] > *,
[id="contact"] > * {
  width: min(760px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#contact .grid,
section[id="contact"] .grid,
[id="contact"] .grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  width: min(760px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 0 !important;
}

#contact .grid > *,
section[id="contact"] .grid > *,
[id="contact"] .grid > * {
  width: 100% !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#contact form,
section[id="contact"] form,
[id="contact"] form,
#contact .grid > div:has(form),
section[id="contact"] .grid > div:has(form),
[id="contact"] .grid > div:has(form) {
  display: none !important;
  visibility: hidden !important;
}

#contact a[href*="mail.google.com"],
section[id="contact"] a[href*="mail.google.com"],
[id="contact"] a[href*="mail.google.com"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  color: hsl(var(--foreground)) !important;
  text-decoration: none !important;
}

#contact a[href*="mail.google.com"]:hover,
section[id="contact"] a[href*="mail.google.com"]:hover,
[id="contact"] a[href*="mail.google.com"]:hover {
  color: hsl(34 72% 80%) !important;
}

@media (max-width: 640px) {
  #contact,
  section[id="contact"],
  [id="contact"] {
    min-height: 34rem;
    text-align: center !important;
  }

  #contact .grid > *,
  section[id="contact"] .grid > *,
  [id="contact"] .grid > * {
    text-align: center !important;
  }
}