@layer utilities {
  .hero-lg {
    font-size: var(--font-size-hero-lg);
    line-height: var(--lh-hero-lg);
    font-weight: var(--font-weight-bold);
  }

  .hero {
    font-size: var(--font-size-hero);
    line-height: var(--lh-hero);
    font-weight: var(--font-weight-bold);
  }

  .h-3xl {
    font-size: var(--font-size-heading-3xl);
    line-height: var(--lh-heading-3xl);
    font-weight: var(--font-weight-bold);
  }

  .h-2xl {
    font-size: var(--font-size-heading-2xl);
    line-height: var(--lh-heading-2xl);
  }

  .h-xl {
    font-size: var(--font-size-heading-xl);
    line-height: var(--lh-heading-xl);
  }

  .h-lg {
    font-size: var(--font-size-heading-lg);
    line-height: var(--lh-heading-lg);
  }

  .h-md {
    font-size: var(--font-size-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--font-weight-bold);
  }

  .h-sm {
    font-size: var(--font-size-heading-sm);
    line-height: var(--lh-heading-sm);
  }

  .h-xs {
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
    font-weight: var(--font-weight-bold);
  }

  .text-base {
    font-size: var(--font-size-base);
    line-height: var(--lh-base);
  }

  .text-sm {
    font-size: var(--font-size-small);
    line-height: var(--lh-small);
  }

  .text-md {
    font-size: var(--font-size-medium);
    line-height: var(--lh-large);
  }

  .text-lg {
    font-size: var(--font-size-large);
    line-height: var(--lh-large);
  }

  .text-bold {
    font-weight: var(--font-weight-bold);
  }

  .lead {
    font-size: var(--font-size-lead);
    line-height: var(--lh-lead);
  }

  .text-label {
    font-size: var(--font-size-label);
    line-height: var(--lh-label);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--font-letter-spacing-wide);
  }

  .label-nav-item {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-heading-sm);
    letter-spacing: var(--font-letter-spacing-wide);
  }

  .label-nav-item-sm {
    font-size: var(--font-size-heading-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-heading-xs);
    letter-spacing: var(--font-letter-spacing-wide);
  }

  @media (min-width: 768px) {
    .label-nav-item {
      font-size: var(--font-size-heading-md);
      font-weight: var(--font-weight-bold);
      line-height: var(--lh-heading-md);
      letter-spacing: var(--font-letter-spacing-normal);
    }

    .label-nav-item-sm {
      font-size: var(--font-size-heading-sm);
      font-weight: var(--font-weight-bold);
      line-height: var(--lh-heading-sm);
      letter-spacing: var(--font-letter-spacing-normal);
    }
  }
}