.breadcrumbs {
  display: none;
  margin-bottom: 3rem;
}

@media screen and (min-width: 640px) {
  .breadcrumbs {
    display: block;
  }
}

.breadcrumbs__items {
  display: flex;
  flex-flow: row wrap;
}

.breadcrumbs__item {
  color: var(--hh-color-teal);
}

.breadcrumbs__item__link {
  text-decoration: none;
}

.breadcrumbs__item:not(:first-child)::before {
  content: '/';
  margin: 0 1.5rem;
  color: var(--hh-color-blue-gray);
}

.breadcrumbs__item__link.is-active {
  color: var(--hh-color-gold);
}