@layer components {
  .page-header, .section-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-8);

    h1 {
      margin: 0;
      font-size: var(--text-3xl);
      font-weight: 750;
      line-height: 1.15;
      letter-spacing: -0.025em;
    }

    /* Section headings share one size so the page title and the score stay the bold elements */
    h2 {
      margin: 0;
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
      line-height: 1.3;
    }

    .page-header__title, .section-header__title {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-4);
    }

    .page-header__subtitle,
    .page-header__description,
    .page-header--subheader,
    p {
      flex-basis: 100%;
      margin: 0;
      color: var(--color-text-muted);
    }

    .page-header__actions, .section-header__actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      gap: var(--space-3) var(--space-5);
    }

    &.page-header--subheader, .section-header--subheader {
      margin-bottom: var(--space-4);
    }

    @media screen and (min-width: 768px) {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
    }
  }

  /* Page titles close with a hairline, like a report section */
  .page-header {
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);

    /* A section header sits on the table or list below it, which draws its own rule */
    &.page-header--subheader {
      padding-bottom: 0;
      border-bottom: 0;
    }
  }
}