.breadcrumbs-wrapper .breadcrumb-list {
  --_breadcrumb-column-gap: calc(1.875rem * var(--body-scale));
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(1.875rem * var(--body-scale));
  row-gap: calc(0.875rem * var(--body-scale));
}

.breadcrumbs-wrapper nav.text-left .breadcrumb-list {
  justify-content: flex-start;
}

.breadcrumbs-wrapper nav.text-center .breadcrumb-list {
  justify-content: center;
}

.breadcrumbs-wrapper nav.text-right .breadcrumb-list {
  justify-content: flex-end;
}

.breadcrumbs-wrapper .breadcrumb-list li {
  position: relative;
}

.breadcrumbs-wrapper .breadcrumb-list li:not(:last-child)::after {
  content: "";
  display: block;
  height: calc(1px * var(--body-scale));
  width: calc(0.625rem * var(--body-scale));
  background-color: rgb(var(--line-color));
  position: absolute;
  top: 50%;
  right: calc(var(--_breadcrumb-column-gap) / -2);
  transform: translate(50%, -50%);
}

.breadcrumbs-wrapper .breadcrumb-list a,
.breadcrumbs-wrapper .breadcrumb-list span {
  line-height: 1.25;
  display: inline-block;
}

.breadcrumbs-wrapper .breadcrumb-list a {
  text-decoration: none;
  color: rgb(var(--text-color));
  padding-block: calc(0.25rem * var(--body-scale));
}

.breadcrumbs-wrapper .breadcrumb-list a:hover {
  text-decoration: underline;
}

.breadcrumbs-wrapper .breadcrumb-list span {
  color: rgb(var(--text-color) / 0.7);
}

@media (hover: none),
(pointer: coarse) {
  .breadcrumbs-wrapper .breadcrumb-list a {
    padding-block: calc(0.875rem * var(--body-scale));
  }

}