@layer utilities {
  .serif-heading-0 {
    font-family: var(--font-riegraf);
    font-size: 4rem;
    font-style: normal;
    font-weight: 300;
    line-height: 3.84rem;
    letter-spacing: -0.08rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .serif-heading-0-mobile {
    font-family: var(--font-riegraf);
    font-size: 3rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2.88rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-0 {
    font-family: var(--font-basel-grotesk);
    font-size: 4rem;
    font-weight: 500;
    line-height: 3.84rem;
    letter-spacing: -0.08rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-0-mobile {
    font-family: var(--font-basel-grotesk);
    font-size: 3rem;
    font-weight: 500;
    line-height: 2.88rem;
    letter-spacing: -0.06rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .serif-heading-1 {
    font-family: var(--font-basel-grotesk);
    font-size: 3.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 3.12rem;
    letter-spacing: -0.065rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .serif-heading-1-mobile {
    font-family: var(--font-basel-grotesk);
    font-size: 2.4375rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2.34rem;
    letter-spacing: -0.04875rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-1 {
    font-family: var(--font-basel-grotesk);
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 3.12rem;
    letter-spacing: -0.065rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-1-mobile {
    font-family: var(--font-basel-grotesk);
    font-size: 2.4375rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.34rem;
    letter-spacing: -0.04875rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-2 {
    font-family: var(--font-basel-grotesk);
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 2.52rem;
    letter-spacing: -0.0225rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-2-mobile {
    font-family: var(--font-basel-grotesk);
    font-size: 1.6875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.025rem;
    letter-spacing: -0.01688rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-3 {
    font-family: var(--font-basel-grotesk);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.8rem;
    letter-spacing: -0.0075rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-4 {
    font-family: var(--font-basel-grotesk);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: -0.00625rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .serif-subheading-1 {
    font-family: var(--font-riegraf);
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.25rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .subheading-1 {
    font-family: var(--font-basel-grotesk);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 133.333%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .subheading-2 {
    font-family: var(--font-basel-grotesk);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .serif-subheading-3 {
    font-family: var(--font-riegraf);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .body-1 {
    font-family: var(--font-basel-grotesk);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4625rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .body-2 {
    font-family: var(--font-basel-grotesk);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .body-3 {
    font-family: var(--font-basel-grotesk);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.09375rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .body-4 {
    font-family: var(--font-basel-grotesk);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 133.333%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .serif-body-5 {
    font-family: var(--font-riegraf);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.05rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .mono-body-5 {
    font-family: var(--font-fragment-mono);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.05625rem;
    letter-spacing: -0.00813rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .button-label-1 {
    font-family: var(--font-basel-grotesk);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 535;
    line-height: 1.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .button-label-2 {
    font-family: var(--font-basel-grotesk);
    font-size: 1rem;
    font-style: normal;
    font-weight: 535;
    line-height: 1.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .button-label-3 {
    font-family: var(--font-basel-grotesk);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 535;
    line-height: 1.25rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .button-label-4 {
    font-family: var(--font-basel-grotesk);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 535;
    line-height: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}