@layer components {
  #header {
    --header-actions-width: 64px;

    margin-inline: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "menu menu"
      "actions-start actions-end"
      "title title";
    place-items: center;

    @media (min-width: 1024px) {
      grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width);
      grid-template-areas:
        "menu menu menu"
        "actions-start title actions-end";
    };

    nav {
      grid-area: menu;
    }
  }

  .heading__actions {
    display: flex;
  }

  .heading__actions--start {
    grid-area: actions-start;
    justify-self: flex-start;
    justify-content: flex-start;
  }

  .heading__actions--end {
    grid-area: actions-end;
    justify-content: flex-end;
    justify-self: flex-end;
  }

  .heading__title {
    grid-area: title;
    padding: 1rem;
    text-wrap: balance;
    text-align: center;

    h1 {
      font-size: var(--text-xl);
    }

    p {
      font-size: var(--text-xs);
    }

    &:has(p) {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}