/* -------------------------------------------------------- */
/* 🔹 Section Title                                         */
/* -------------------------------------------------------- */
/* Heading above a page section, with an optional subtitle    */

.section-title {
  font-size: var(--text-display-small);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-on-surface);
  text-wrap: balance;
}

@media (max-width: 767px) {
  .section-title {
    font-size: var(--text-headline-large);
  }

  /* Wrapped words take a line each, where balance would crowd them together */
  .section-title__break {
    display: block;
  }
}