@layer components {
  .badge {
    background: var(--color-accent-muted);
    color: var(--color-accent-text);
    padding-inline: var(--space-2);
    border: 1px solid var(--color-border);
    font-size: var(--text-xs);
  }

  .page-heading {
    font-size: var(--text-2xl);
    font-weight: 400;
    letter-spacing: 0.025em;
    margin-block-end: var(--space-4);
    color: var(--color-text);

    @media (min-width: 48rem) {
      font-size: var(--text-3xl);
      margin-block-end: var(--space-6);
    }

    @media (min-width: 64rem) {
      font-size: var(--text-4xl);
    }
  }

  .page-subtitle {
    font-size: var(--text-base);
    font-weight: 200;
    font-style: italic;
    margin-block-end: var(--space-12);
    color: var(--color-text);

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

  .section-heading {
    font-size: var(--text-lg);
    font-weight: 500;
    letter-spacing: 0.025em;
    margin-block: var(--space-8) var(--space-4);
    color: var(--color-text-muted);

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

  .hiring-link {
    margin-block-start: var(--space-6);
    font-size: var(--text-base);
    color: var(--color-text);

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

    a {
      color: var(--color-text);
      text-decoration: underline;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}