.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 10px;
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-bg: #d1e9e8;
  --bs-breadcrumb-border-radius: 0;
  --bs-breadcrumb-divider-color: var(--bs-dark);
  --bs-breadcrumb-item-padding-x: 1em;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-60k);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/");
}
.breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}

.breadcrumb-ribbon {
  position: relative;
}
.breadcrumb-ribbon::before {
  content: "";
  background-color: #d1e9e8;
  display: block;
  position: absolute;
  width: 100vw;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.breadcrumb-ribbon .breadcrumb {
  --bs-link-color: var(--bs-secondary-60k);
  font-weight: 600;
  position: relative;
  text-transform: capitalize;
  z-index: 2;
}
.breadcrumb-ribbon .breadcrumb .active {
  font-weight: 600;
}
.breadcrumb-ribbon .breadcrumb .active:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumb-ribbon .breadcrumb .active::before {
  font-weight: 400;
}
.breadcrumb-ribbon .breadcrumb-item {
  white-space: nowrap;
}