@layer components {
  .contact-layout .site-brand { display: none; }
  .contact-page { width: min(100%, var(--stage)); margin: -7.5rem auto 0; padding: 0 var(--page-gutter) 6rem; }
  .contact-page__article { width: min(60.8125rem, 100%); text-align: center; }
  .contact-page__logo { width: 18.125rem; height: 18.125rem; margin-inline: auto; object-fit: contain; }
  .contact-page__header { margin-top: var(--space-m); }
  .contact-page__header h1 { display: inline-block; position: relative; margin: 0; font-family: var(--font-typewriter); font-size: var(--text-page-title); font-weight: 100; line-height: var(--line-height-tight); }
  .contact-page__header h1::after { content: ""; position: absolute; bottom: -1.25rem; left: 50%; width: 7.6875rem; height: 1.1875rem; background: url("../images/grand-ziguigui.svg") center / 100% 100% no-repeat; transform: translateX(-50%); }
  .contact-page__content { margin-top: var(--page-title-content-gap); font-family: var(--font-typewriter); font-size: var(--text-menu); font-weight: 100; line-height: var(--line-height-ui); }
  .contact-page__content > * { margin-block: 0; }
  .contact-page__content > * + * { margin-top: var(--space-xs); }
  .contact-page__content a { text-decoration-thickness: 1px; }
  .contact-page .newsletter { width: min(48.5rem, 100%); margin: 8rem 0 0; padding: var(--space-m); }
  .contact-page .newsletter h2 { display: table; width: fit-content; margin: 0 0 var(--space-m); font-family: var(--font-display); font-size: var(--text-section-title); font-weight: 400; line-height: 1.35; }
  .contact-page .newsletter__title-text { padding-bottom: 1.5rem; background: url("../images/grand-ziguigui.svg") left bottom / 10.75rem 1.5rem no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .contact-page .newsletter p { margin: 0; }
}

@media (max-width: 64rem) {
  .contact-layout .site-header__stage { min-height: 5rem; }
  .contact-page { margin-top: 0; padding-bottom: var(--space-l); }
  .contact-page__article { text-align: left; }
  .contact-page__logo { width: clamp(12rem, 50vw, 16rem); height: auto; }
  .contact-page__header { text-align: center; }
  .contact-page__content { text-align: center; }
  .contact-page .newsletter { margin-top: var(--space-l); padding-inline: 0; }
}
