.breadcrumbs {
  padding-block: 1.1rem;
  background: var(--color-bg-dark);
  border-bottom: 1px solid var(--color-border-dark);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: var(--tracking-wide);
  color: var(--text-on-dark-muted);
}

.breadcrumbs__item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus-visible {
  color: var(--color-accent);
}

.breadcrumbs__item.is-current {
  color: var(--text-on-dark);
}

.breadcrumbs__sep {
  opacity: 0.5;
}