/*
 * Component: Section Title
 * Depends on: tokens.css
 */

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

.section-title--center { text-align: center; }
.section-title--right  { text-align: right; }

.section-title__heading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  margin: 0 0 var(--space-2);
  position: relative;
  display: inline-block;
}

.section-title__heading::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
}

.section-title--center .section-title__heading::after { margin-left: auto; margin-right: auto; }
.section-title--right  .section-title__heading::after { margin-left: auto; }

.section-title__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--line-height-base);
}