.breadcrumbs {
  display: block;
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-28);
  line-height: 1.4;
}

.breadcrumbs[hidden],
.breadcrumbs.is-hidden,
.breadcrumbs:empty {
  display: none;
  margin-top: 0;
  margin-bottom: 0;
}

.breadcrumbs .breadcrumbs-item {
  display: inline;
  font-size: var(--font-size-14);
  font-weight: 300;
  color: var(--color-placeholder);
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumbs .breadcrumbs-item:hover {
  color: var(--color-red);
}

.breadcrumbs-separator {
  display: inline-flex;
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--color-placeholder);
  margin: 0 var(--spacing-8);
  vertical-align: text-bottom;
}

.breadcrumbs .breadcrumbs-item--current,
.breadcrumbs .breadcrumbs-item--current:hover {
  color: var(--color-placeholder);
  cursor: default;
  pointer-events: none;
}

.breadcrumbs .breadcrumbs-item--current {
  white-space: normal;
}