@layer page {

  #page-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "details" "form";
    gap: 1rem;

    h2 {
      font-size: var(--step-0);
      margin-block-end: var(--space-s);
    }

    .intro {
      grid-area: intro;
    }

    #details-section {
      grid-area: details;
      h2 {
        margin-block-start: 0;
      }
    }

    #form-section {
      grid-area: form;
      h2 {
        margin-block-start: 0;
      }
    }

    @container (width >= 42rem) {
      grid-template-columns: 15rem 1fr;
      grid-template-areas: "intro intro" "details form";
      gap: 2rem;
    }
  }

  #contact-page__contact-details {
    list-style: none;
    padding-inline-start: 0;
    font-weight: 500;
    display: flex;
    gap: 0.25rem;
    flex-direction: column;
    a {
      display: inline-block;
      margin-inline-start: 0.5em;
      font-weight: normal;
      text-decoration: none;
      padding-block: 0.25rem;
    }
  }

}