.breadcrumbs {
  margin-block: 0 1.5rem;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-hero .breadcrumbs ol { justify-content: center; }

.breadcrumbs li {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 1px;
  height: 0.875em;
  border-right: 1px solid currentColor;
  transform: rotate(20deg);
  margin-inline: 0.6rem;
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: underline;
}

.breadcrumbs span { padding-block: 0.25rem; }
.breadcrumbs-inverse, .breadcrumbs-inverse a { color: var(--white); }
.breadcrumbs-inverse a:hover { color: #ffe6a6; }