.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-200);
  color: var(--c-muted);
}

.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before { content: "/"; color: var(--c-line-2); }
@media (hover: hover) and (pointer: fine) { .breadcrumbs a:hover { color: var(--c-accent-2); } }
.breadcrumbs [aria-current="page"] { color: var(--c-text); }