.breadcrumb {
  display: flex;
  align-items: center;
  /* Figma sets the crumb 16px above the H1, not 32. */
  margin-bottom: 1rem;
  font-size: var(--type-crumb);
  line-height: var(--lh-crumb);
  color: var(--text-2);
}
.breadcrumb-item {
  display: flex;
  align-items: center;
}
.breadcrumb-item:not(:last-child):after {
  content: "/";
  margin: 0 0.5rem;
  color: var(--text-3);
}
.breadcrumb-item a {
  color: var(--union-color);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb-item a:hover {
  color: var(--union-color);
}
.breadcrumb-item.active {
  color: var(--text-color);
}