.font-primary,
.font-primary * {
  font-family: var(--primary-font);
  font-style: normal;
  letter-spacing: 0;

  &.heading-1-lg,
  &.heading-1-md,
  &.heading-2-lg,
  &.heading-2-md,
  &.heading-2-sm,
  &.nav {
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  &.heading-1-lg {
    font-size: 3.6rem;
    line-height: 3.8rem;
  }

  &.heading-1-md {
    font-size: 2.8rem;
    line-height: 3rem;
  }

  &.heading-2-lg {
    font-size: 2.4rem;
    line-height: 2.8rem;
  }

  &.heading-2-md {
    font-size: 2rem;
    line-height: 2.2rem;
  }

  &.heading-2-sm {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }

  &.subtitle-lg,
  &.subtitle-sm,
  &.body-lg,
  &.body-md,
  &.legal {
    font-weight: normal;
  }

  &.subtitle-lg {
    font-size: 2rem;
    line-height: 2.4rem;
  }

  &.subtitle-sm {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }

  &.body-lg {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }

  &.body-md {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }

  &.legal {
    font-size: 1rem;
    line-height: 1.2rem;
  }

  &.buttons-lg,
  &.buttons-sm {
    font-weight: 500;
  }

  &.buttons-lg {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }

  &.buttons-sm {
    font-size: 1.4rem;
    line-height: 1.4rem;
  }

  &.nav {
    font-size: 2rem;
    line-height: 2rem;

    @media screen and (min-width: 744px) {
      font-size: 2.4rem;
      line-height: 2.4rem;
    }
  }

  @media screen and (min-width: 744px) {
    &.md-heading-1-lg {
      font-size: 3.6rem;
      line-height: 3.8rem;
    }

    &.md-heading-1-md {
      font-size: 2.8rem;
      line-height: 3rem;
    }

    &.md-heading-2-lg {
      font-size: 2.4rem;
      line-height: 2.8rem;
    }

    &.md-heading-2-md {
      font-size: 2rem;
      line-height: 2.2rem;
    }

    &.md-heading-2-sm {
      font-size: 1.4rem;
      line-height: 1.8rem;
    }

    &.md-subtitle-lg {
      font-size: 2rem;
      line-height: 2.4rem;
    }

    &.md-body-lg {
      font-size: 1.4rem;
      line-height: 1.6rem;
    }

    &.md-body-md {
      font-size: 1.2rem;
      line-height: 1.4rem;
    }

    &.md-buttons-lg {
      font-size: 1.6rem;
      line-height: 1.6rem;
    }
  }

  @media screen and (min-width: 1280px) {
    &.lg-heading-1-xxl {
      font-size: 4rem;
      line-height: 4.2rem;
    }

    &.lg-heading-1-xl {
      font-size: 3.8rem;
      line-height: 4rem;
    }

    &.lg-heading-1-lg {
      font-size: 3.6rem;
      line-height: 3.8rem;
    }

    &.lg-heading-1-md {
      font-size: 2.8rem;
      line-height: 3rem;
    }

    &.lg-heading-2-lg {
      font-size: 2.4rem;
      line-height: 2.8rem;
    }

    &.lg-heading-2-md {
      font-size: 2rem;
      line-height: 2.2rem;
    }

    &.lg-subtitle-lg {
      font-size: 2rem;
      line-height: 2.4rem;
    }

    &.lg-body-lg {
      font-size: 1.4rem;
      line-height: 1.6rem;
    }

    &.lg-body-md {
      font-size: 1.2rem;
      line-height: 1.4rem;
    }

    &.lg-buttons-lg {
      font-size: 1.6rem;
      line-height: 1.6rem;
    }
  }

  @media screen and (min-width: 1440px) {
    &.xl-heading-1-lg {
      font-size: 3.6rem;
      line-height: 3.8rem;
    }

    &.xl-heading-1-md {
      font-size: 2.8rem;
      line-height: 3rem;
    }

    &.xl-heading-2-lg {
      font-size: 2.4rem;
      line-height: 2.8rem;
    }

    &.xl-heading-2-md {
      font-size: 2rem;
      line-height: 2.2rem;
    }

    &.xl-subtitle-lg {
      font-size: 2rem;
      line-height: 2.4rem;
    }

    &.xl-body-lg {
      font-size: 1.4rem;
      line-height: 1.6rem;
    }

    &.xl-body-md {
      font-size: 1.2rem;
      line-height: 1.4rem;
    }

    &.xl-buttons-lg {
      font-size: 1.6rem;
      line-height: 1.6rem;
    }
  }
}

.font-secondary,
.font-secondary * {
  font-family: var(--secondary-font);
  font-style: normal;

  &.lg,
  &.md,
  &.sm,
  &.xs {
    font-weight: 500;
    letter-spacing: -0.04em;
  }

  &.lg {
    font-size: 8.2rem;
    line-height: 8.4rem;
  }

  &.md {
    font-size: 4.8rem;
    line-height: 5rem;
  }

  &.sm {
    font-size: 4rem;
    line-height: 4.2rem;
  }

  &.xs {
    font-size: 2.4rem;
    line-height: 2.8rem;
  }

  &.mono-xlg,
  &.mono-lg,
  &.mono-md,
  &.mono-sm,
  &.mono-xsm {
    font-weight: 300;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
  }

  &.mono-xlg {
    font-size: 2.4rem;
    line-height: 2.4rem;
  }

  &.mono-lg {
    font-size: 2rem;
    line-height: 2rem;
  }

  &.mono-md {
    font-size: 1.6rem;
    line-height: 2rem;
  }

  &.mono-sm {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }

  &.mono-xsm {
    font-size: 1rem;
    line-height: 1.4rem;
  }

  @media screen and (min-width: 744px) {
    &.md-lg {
      font-size: 8.2rem;
      line-height: 8.4rem;
    }

    &.md-md {
      font-size: 4.8rem;
      line-height: 5rem;
    }

    &.md-sm {
      font-size: 4rem;
      line-height: 4.2rem;
    }

    &.md-xs {
      font-size: 2.4rem;
      line-height: 2.8rem;
    }

    &.md-mono-xlg {
      font-size: 2.4rem;
      line-height: 2.4rem;
    }

    &.md-mono-lg {
      font-size: 2rem;
      line-height: 2rem;
    }

    &.md-mono-md {
      font-size: 1.6rem;
      line-height: 2rem;
    }

    &.md-mono-sm {
      font-size: 1.4rem;
      line-height: 1.8rem;
    }
  }

  @media screen and (min-width: 1280px) {
    &.lg-lg {
      font-size: 8.2rem;
      line-height: 8.4rem;
    }

    &.lg-md {
      font-size: 4.8rem;
      line-height: 5rem;
    }

    &.lg-sm {
      font-size: 4rem;
      line-height: 4.2rem;
    }

    &.lg-xs {
      font-size: 2.4rem;
      line-height: 2.8rem;
    }

    &.lg-mono-xlg {
      font-size: 2.4rem;
      line-height: 2.4rem;
    }

    &.lg-mono-lg {
      font-size: 2rem;
      line-height: 2rem;
    }

    &.lg-mono-md {
      font-size: 1.6rem;
      line-height: 2rem;
    }

    &.lg-mono-sm {
      font-size: 1.4rem;
      line-height: 1.8rem;
    }
  }

  @media screen and (min-width: 1440px) {
    &.xl-lg {
      font-size: 8.2rem;
      line-height: 8.4rem;
    }

    &.xl-md {
      font-size: 4.8rem;
      line-height: 5rem;
    }

    &.xl-sm {
      font-size: 4rem;
      line-height: 4.2rem;
    }

    &.xl-xs {
      font-size: 2.4rem;
      line-height: 2.8rem;
    }

    &.xl-mono-xlg {
      font-size: 2.4rem;
      line-height: 2.4rem;
    }

    &.xl-mono-lg {
      font-size: 2rem;
      line-height: 2rem;
    }

    &.xl-mono-md {
      font-size: 1.6rem;
      line-height: 2rem;
    }

    &.xl-mono-sm {
      font-size: 1.4rem;
      line-height: 1.8rem;
    }
  }
}