ListItem.module.css

.ListItem {
  display: flex;
  align-items: flex-start;
  gap: var(--base-size-12);
}

.ListItem--default {
  color: var(--brand-color-text-default);
}

.ListItem--muted {
  color: var(--brand-color-text-muted);
}

.ListItem__leading-visual {
  margin: var(--base-size-4) 0;
}

.ListItem__leading-visual--muted {
  fill: var(--brand-color-text-muted);
}

.OrderedList__item::before {
  content: counter(li) '.';
  counter-increment: li;
  min-width: var(--base-size-16);
  text-align: center;
  font-weight: var(--brand-text-size-200);
}