:host {
  display: block;
}

.display,
.headline {
  font-family: "Lexend Deca", sans-serif;
  line-height: 1.3;
}

.title,
label,
.body {
  font-family: "Noto Sans", sans-serif;
  line-height: 1.5;
}

.w-normal {
  font-weight: 400;
}

.w-medium {
  font-weight: 500;
}

.w-semibold {
  font-weight: 600;
}

.display.large {
  font-size: 56px;
}
.display.medium {
  font-size: 48px;
}
.display.small {
  font-size: 40px;
}

.headline.large {
  font-size: 34px;
}
.headline.medium {
  font-size: 28px;
}
.headline.small {
  font-size: 24px;
}

.title.large {
  font-size: 20px;
}
.title.medium {
  font-size: 18px;
}
.title.small {
  font-size: 16px;
}

label.large {
  font-size: 16px;
}
label.medium {
  font-size: 14px;
}
label.small {
  font-size: 12px;
}

.body.large,
.code.large {
  font-size: 16px;
}
.body.medium,
.code.medium {
  font-size: 14px;
}
.body.small,
.code.small {
  font-size: 12px;
}

.letter-spacing-neg-2 {
  letter-spacing: -1px;
}

.letter-spacing-neg-1 {
  letter-spacing: -0.5px;
}

.letter-spacing-normal {
  letter-spacing: 0;
}

.letter-spacing-1 {
  letter-spacing: 0.15px;
}

.letter-spacing-2 {
  letter-spacing: 0.25px;
}