/**
 * Headline component style.
 * Using the fluid type scale
 */
.headline {
  font-size: var(--font-size, var(--text-base));
  font-weight: var(--font-weight, normal);
  line-height: var(--line, 1.35);
  color: var(--color, var(--c-grayscale));
}
.headline--4xl {
  --font-size: var(--text-4xl);
  --line: 1.2;
  --color: var(--c-brand-secondary);
}
.headline--3xl {
  --font-size: var(--text-3xl);
  --line: 1.25;
  --color: var(--c-brand-secondary);
}
.headline--2xl {
  --font-size: var(--text-2xl);
  --color: var(--c-brand-secondary);
}
.headline--xl {
  --font-size: var(--text-xl);
  --line: 1.25;
  --color: var(--c-brand-secondary);
}
.headline--lg {
  --font-size: var(--text-lg);
}
.headline--md {
  --font-size: var(--text-md);
  --line: 1.35;
}
.headline--sm {
  font-size: var(--text-sm);
  line-height: 1.35;
}
.headline--subtitle {
  --font-size: var(--text-2xl);
  --font-weight: 400;
  --color: var(--c-grayscale-dark);
}
.headline--sub-caps {
  --font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  --color: var(--c-type);
}
.headline--caption {
  --font-size: var(--text-sm);
  --color: var(--c-type);
  --line: 1.6;
}
.headline--light {
  font-weight: 400;
}
.headline--bold {
  font-weight: 700;
}