@layer components {
  .hero {
    margin-block-end: var(--block-space);
  }

  .hero__title {
    font-size: var(--text-3xl);
    font-weight: 700;
  }

  .hero__tagline {
    color: var(--color-muted);
    margin-block-start: var(--block-space-quarter);
  }

  .page-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-block-end: var(--block-space);
  }
}