.breadcrumb {
  margin: var(--space-sm) 0 var(--space-md) 0;

  ol {
    display: flex;
    list-style: none;
    margin: 0;
    font-size: var(--font-sm);
    color: var(--color-text);
  }

  li {
    display: flex;
    align-items: center;
    font-size: var(--font-xs);

    + li:before {
      content: "→";
      margin: 0 var(--space-xs);
    }

    &:not(:last-child) {
      font-weight: 500;
    }
  }

  a {
    text-decoration: underline;
    color: var(--color-primary);
    transition: color 0.2s;

    &:hover {
      opacity: 0.8;
    }
  }
}