body {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 150%;
}

.display-0,
.display-2,
.display-4,
.display-5,
.headline-1,
.headline-2,
.headline-3,
.headline-4,
.headline-5,
.headline-6,
.headline-7,
.title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.title-6,
.title-7,
.title-8,
.title-9,
.body-0,
.body-2,
.body-3,
.body-4,
.body-5,
.body-6,
.body-7,
.body-8,
.body-9,
.body-10,
.label-0,
.label-1,
.label-2,
.label-3,
.label-4,
.label-5,
.label-6,
.special-1,
.special-2 {
  font-family: var(--font-display);
}

.display-1,
.display-3,
.body-1,
.special-3 {
  font-family: var(--font-sans);
}

.display-1,
.display-3,
.body-0,
.body-1,
.body-7,
.body-8,
.special-3,
.label-4 {
  font-weight: 400;
}

.title-9,
.body-6,
.label-3,
.label-5 {
  font-weight: 500;
}

.headline-7,
.title-2,
.title-4,
.title-8,
.body-5,
.body-9,
.body-10,
.label-2,
.label-6 {
  font-weight: 600;
}

.display-5,
.headline-3,
.headline-5,
.title-1,
.title-7,
.body-4,
.label-1 {
  font-weight: 700;
}

.display-0,
.headline-6,
.title-3,
.title-6,
.body-3,
.label-0 {
  font-weight: 800;
}

.display-2,
.display-4,
.headline-1,
.headline-2,
.headline-4,
.title-5,
.body-2,
.special-1,
.special-2 {
  font-weight: 900;
}

/* Display Typography */
.display-0 {
  font-size: 98px;
  line-height: 100%;
}

.display-1 {
  font-size: 92px;
  line-height: 120%;
}

.display-2 {
  font-size: 86px;
  line-height: 100%;
}

.display-3 {
  font-size: 80px;
  line-height: 150%;
}

.display-4 {
  font-size: 46px;
  line-height: 100%;
}

.display-5 {
  font-size: 36px;
  line-height: 150%;
}

/* Headline Typography */
.headline-1 {
  font-size: 32px;
  line-height: 150%;
}

.headline-2 {
  font-size: 30px;
  line-height: 120%;
}

.headline-3 {
  font-size: 30px;
  line-height: 100%;
}

.headline-4 {
  font-size: 22px;
  line-height: 100%;
}

.headline-5 {
  font-size: 22px;
  line-height: 150%;
}

.headline-6 {
  font-size: 24px;
  line-height: 150%;
}

.headline-7 {
  font-size: 24px;
  line-height: 150%;
}

/* Title Typography */
.title-1 {
  font-size: 20px;
  line-height: 150%;
}

.title-2 {
  font-size: 20px;
  line-height: 150%;
}

.title-3 {
  font-size: 18px;
  line-height: 100%;
}

.title-4 {
  font-size: 18px;
  line-height: 150%;
}

.title-5 {
  font-size: 16px;
  line-height: 120%;
}

.title-6 {
  font-size: 16px;
  line-height: 150%;
}

.title-7 {
  font-size: 16px;
  line-height: 150%;
}

.title-8 {
  font-size: 16px;
  line-height: 120%;
}

.title-9 {
  font-size: 16px;
  line-height: 120%;
}

/* Body Typography */
.body-0 {
  font-size: 16px;
  line-height: 150%;
}

.body-1 {
  font-size: 30px;
  line-height: 120%;
}

.body-2 {
  font-size: 14px;
  line-height: 120%;
}

.body-3 {
  font-size: 14px;
  line-height: 100%;
}

.body-4 {
  font-size: 14px;
  line-height: 150%;
}

.body-5 {
  font-size: 14px;
  line-height: 120%;
}

.body-6 {
  font-size: 14px;
  line-height: 100%;
}

.body-7 {
  font-size: 14px;
  line-height: 100%;
}

.body-8 {
  font-size: 14px;
  line-height: 120%;
}

.body-9 {
  font-size: 12px;
  line-height: 150%;
}

.body-10 {
  font-size: 14px;
  line-height: 150%;
}

/* Label Typography */
.label-0 {
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 10%;
}

.label-1 {
  font-size: 12px;
  line-height: 150%;
}

.label-2 {
  font-size: 12px;
  line-height: 150%;
}

.label-3 {
  font-size: 12px;
  line-height: 100%;
}

.label-4 {
  font-size: 12px;
  line-height: 150%;
}

.label-5 {
  font-size: 10px;
  line-height: 100%;
}

.label-6 {
  font-size: 8px;
  line-height: 100%;
}

/* Special Typography */
.special-1 {
  font-size: 135px;
  line-height: 100%;
}

.special-2 {
  font-size: 175px;
  line-height: 150%;
}

.special-3 {
  font-size: 135px;
  line-height: 100%;
}

/* Mobile Typography */
@media screen and (max-width: 1280px) {
  .display-0 {
    font-size: 80px;
    line-height: 100%;
  }

  .display-1 {
    font-size: 92px;
    line-height: 120%;
  }

  .display-2 {
    font-size: 86px;
    line-height: 100%;
  }

  .display-3 {
    font-size: 75px;
    line-height: 150%;
  }

  .display-4 {
    font-size: 30px;
    line-height: 100%;
  }

  .display-5 {
    font-size: 36px;
    line-height: 150%;
  }

  /* Headline Typography */
  .headline-1 {
    font-size: 28px;
    line-height: 150%;
  }

  .headline-2 {
    font-size: 24px;
    line-height: 120%;
  }

  .headline-3 {
    font-size: 30px;
    line-height: 100%;
  }

  .headline-4 {
    font-size: 22px;
    line-height: 100%;
  }

  .headline-5 {
    font-size: 20px;
    line-height: 150%;
  }

  .headline-6 {
    font-size: 24px;
    line-height: 150%;
  }

  .headline-7 {
    font-size: 24px;
    line-height: 150%;
  }

  /* Title Typography */
  .title-1 {
    font-size: 18px;
    line-height: 150%;
  }

  .title-2 {
    font-size: 18px;
    line-height: 150%;
  }

  .title-3 {
    font-size: 18px;
    line-height: 100%;
  }

  .title-4 {
    font-size: 18px;
    line-height: 150%;
  }

  .title-5 {
    font-size: 16px;
    line-height: 120%;
  }

  .title-6 {
    font-size: 16px;
    line-height: 150%;
  }

  .title-7 {
    font-size: 16px;
    line-height: 150%;
  }

  .title-8 {
    font-size: 16px;
    line-height: 120%;
  }

  .title-9 {
    font-size: 14px;
    line-height: 120%;
  }

  /* Body Typography */
  .body-0 {
    font-size: 16px;
    line-height: 150%;
  }

  .body-1 {
    font-size: 30px;
    line-height: 120%;
  }

  .body-2 {
    font-size: 14px;
    line-height: 120%;
  }

  .body-3 {
    font-size: 14px;
    line-height: 100%;
  }

  .body-4 {
    font-size: 14px;
    line-height: 150%;
  }

  .body-5 {
    font-size: 14px;
    line-height: 120%;
  }

  .body-6 {
    font-size: 14px;
    line-height: 100%;
  }

  .body-7 {
    font-size: 14px;
    line-height: 100%;
  }

  .body-8 {
    font-size: 14px;
    line-height: 120%;
  }

  .body-9 {
    font-size: 12px;
    line-height: 150%;
  }

  .body-10 {
    font-size: 14px;
    line-height: 150%;
  }

  /* Label Typography */
  .label-0 {
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 10%;
  }

  .label-1 {
    font-size: 12px;
    line-height: 150%;
  }

  .label-2 {
    font-size: 12px;
    line-height: 150%;
  }

  .label-3 {
    font-size: 12px;
    line-height: 100%;
  }

  .label-4 {
    font-size: 12px;
    line-height: 150%;
  }

  .label-5 {
    font-size: 10px;
    line-height: 100%;
  }

  .label-6 {
    font-size: 8px;
    line-height: 100%;
  }

  /* Special Typography */
  .special-1 {
    font-size: 135px;
    line-height: 100%;
  }

  .special-2 {
    font-size: 175px;
    line-height: 150%;
  }

  .special-3 {
    font-size: 135px;
    line-height: 100%;
  }
}

@media screen and (max-width: 768px) {
	.display-4 {
		font-size: 24px;
	}
}