.breadcrumb {
  display: flex;
  margin-bottom: calc(var(--grid-gap) / 4);
}

.breadcrumb__items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style-type: none;
  margin: calc(var(--grid-gap) / 2) 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(16rem/var(--initial-font-multiplier));
  font-weight: 600;
  padding: 0;
}

.breadcrumb__item + .breadcrumb__item:before {
  content: '';
  width: 4px;
  height: 4px;
  display: inline-block;
  background: var(--text-color-light-gray);
  border-radius: 4px;
}

.breadcrumb__link, .breadcrumb__text {
  color: var(--text-color-light-gray);
}

.breadcrumb__item:first-child > .breadcrumb__link {
  color: var(--text-color);
}

:root.root--special .breadcrumb__item {
  color: var(--special-text-color);
}

@media (hover: hover) {
  .breadcrumb__link:hover {
    color: var(--primary-color-hover);
    text-decoration: underline;
    text-decoration-color: var(--primary-color-25);
  }
}