@layer components {
  .page-heading {
    font-size: var(--text-x-large);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    margin-block-end: var(--block-space-half);
    color: var(--color-gray-darker);

    @media (min-width: 48rem) {
      font-size: var(--text-xx-large);
      margin-block-end: var(--block-space-half);
    }

    @media (min-width: 64rem) {
      font-size: clamp(2rem, 0.5vw + 1.75rem, 2.5rem);
    }
  }

  .page-subtitle {
    font-size: var(--text-normal);
    font-weight: 400;
    margin-block-end: calc(var(--block-space) * 3);
    color: var(--color-gray-darker);

    @media (min-width: 48rem) {
      font-size: var(--text-large);
    }
  }

  .section-heading {
    font-size: var(--text-large);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    margin-block: var(--block-space-double) var(--block-space);
    color: var(--color-gray-dark);

    @media (min-width: 48rem) {
      font-size: var(--text-x-large);
    }
  }
}