.text-heading-xl {
  font-family: var(--font-family);
  font-size: var(--font-size-heading-xl);
  line-height: var(--line-height-heading-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--text-transform-heading);
}

@media (max-width: 800px) {
  .text-heading-xl {
    font-size: var(--font-size-heading-lg);
    line-height: var(--line-height-heading-lg);
  }
}

.text-heading-lg {
  font-family: var(--font-family);
  font-size: var(--font-size-heading-lg);
  line-height: var(--line-height-heading-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--text-transform-heading);
}

.text-subheading-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--text-transform-heading);
}

.text-subheading {
  font-family: var(--font-family);
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
  font-weight: var(--font-weight-text);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--text-transform-heading);
}

.text-subheading em {
  color: var(--colors-medium);
  font-style: normal;
}

.text-reading {
  font-family: var(--font-family);
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
  font-weight: var(--font-weight-text);
  letter-spacing: var(--letter-spacing-text);
  text-transform: var(--text-transform-text);
}

.text-link {
  font-family: var(--font-family);
  font-size: var(--font-size-text);
  line-height: var(--line-height-text);
  font-weight: var(--font-weight-text);
  letter-spacing: var(--letter-spacing-text);
  text-transform: var(--text-transform-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}