@layer components {
  .contact-hero {
    background-image: var(--contact-hero-bg);
    position: relative;
    text-align: center;

    min-height: calc(100dvh - var(--header-height, 80px));
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding-top: var(--hero-top-pad, 48px);
    overflow: clip;
  }
  .contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.55);
  }

  .contact-hero .container {
    position: relative;
    z-index: 1;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    gap: 0;
  }

  .contact-hero__title {
    line-height: 1.05;
    text-align: center;
    color: white;
    font-size: 7rem;
    margin: 0 0 16px;
  }

  .contact-hero__subtitle {
    margin-top: 0.75rem;
    color: white;
    line-height: 1.35;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
    max-width: 60ch;
  }
  @media (min-width: 1024px) {
    .contact-hero__subtitle {
      max-width: 52ch;
    }
  }

  .breadcrumb {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: white;
  }
  .breadcrumb a {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: white;
  }

  .contact-hero--brand {
    background: var(--brand-color);
  }
  .contact-hero--brand::before {
    background: transparent;
  }

  .contact-infos {
    align-items: start;
  }

  .contact-infos__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: calc(var(--block-gap, 16px) * 5);
    min-height: 100%;
  }

  .contact-infos__icon {
    width: 56px;
    height: 56px;
    display: block;
    border-radius: 9999px;
    object-fit: contain;
    margin-bottom: 2rem;
  }

  .contact-infos__label {
    margin-top: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: white;

    font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.875rem);
    line-height: 1.2;
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contact-infos__value,
  .contact-infos__value a,
  .contact-infos__value a:visited {
    color: white;
  }
  .contact-infos__value a:hover,
  .contact-infos__value a:focus {
    text-decoration: underline;
  }

  .contact-infos__value {
    color: white;
    margin-top: 1rem;
  }
}