@layer pages {
 #hero {

  --figure-offset: 5rem;

  h1 {
    width: auto;
    font-size: var(--step-5);
    flex-grow: 1;
  }
  

  figure svg {
    max-width: 15rem;
    margin-block-start: -5cqi;
    margin-block-end: -10cqi;
    @media (width > 60rem) {
      margin-block-end: -20cqi;
    }
  }

 }

 .contact-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 600;
    font-style: normal;

    address {
      font-style: normal;
    }

    a {
      color: inherit;
      text-decoration: none;
    }
 }

 #contact-form-section {
    padding-block-end: var(--section-padding);
    padding-block-start: var(--space-xl);

    #contact-form {
      max-inline-size: 40rem;
    }

    button[type="submit"] {
      inline-size: fit-content;
    }
 }
}