/* Section headings shared by every content section. */

.section-heading {
  margin-bottom: var(--space-6);
}

.section-heading__title {
  font-size: var(--text-2xl);
  text-transform: uppercase;
  text-wrap: balance;
}

.section-heading__rule {
  display: block;
  width: 124px;
  height: 5px;
  margin-top: var(--space-3);
  background: var(--color-blue);
  border-radius: var(--radius-sm);
}

.section-heading__subtitle {
  max-width: 62ch;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* --- Tone variants ------------------------------------------------------ */

.section-heading--dark .section-heading__title {
  color: var(--color-ink);
}

.section-heading--dark .section-heading__subtitle {
  color: var(--color-ink-muted);
}

.section-heading--light .section-heading__title {
  color: var(--color-on-dark);
}

.section-heading--light .section-heading__subtitle {
  color: var(--color-blue);
}