/**
 * Typographic headline classes
 * @variant {4x-large | 3x-large | 2x-large | x-large | large | medium} syn-heading The size of the headline
 */
.syn-heading--medium {
  font: var(--syn-heading-medium);
}

.syn-heading--large {
  font: var(--syn-heading-large);
}

.syn-heading--x-large {
  font: var(--syn-heading-x-large);
}

.syn-heading--2x-large {
  font: var(--syn-heading-2x-large);
}

.syn-heading--3x-large {
  font: var(--syn-heading-3x-large);
}

.syn-heading--4x-large {
  font: var(--syn-heading-4x-large);
}