@layer components {
  .section-title {
    margin-block-end: var(--space-4);
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-2);
  }

  .section-heading > .section-title {
    margin-block-end: var(--space-0);
  }
}