@layer component {
  .breadcrumbs {
    margin-block-end: 1.125rem;
  }

  .breadcrumbs__items {
    font: var(--font-body-m-semibold);
    letter-spacing: var(--letter-spacing-body-m-semibold);
    color: var(--color-text-secondary);

    & > * {
      display: inline-block;
      text-transform: uppercase;
    }

    & a {
      color: inherit;
      text-decoration: none;
    }

    & a:last-of-type {
      color: var(--color-secondary);
    }

    & a:hover {
      text-decoration: underline;
    }
  }

  .breadcrumb__separator {
    margin-inline:.5rem;
  }
}