:where(.breadcrumb) {
  align-items: center;
  color: var(--color-text-subtle);
  column-gap: var(--size-1);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-wrap: break-word;

  .breadcrumb__item {
    min-inline-size: 0;
  }

  .breadcrumb__separator {
    flex: 0 0 auto;
  }

  a:hover {
    color: black;
    text-decoration: underline;
  }

  @media (min-width: 40rem) {
    column-gap: var(--size-2);
  }

  @media (max-width: 39.999rem) {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;

    /* Keep the immediate parent and current page visible on narrow screens. */
    > :not(:nth-last-child(-n + 3)) {
      display: none;
    }

    .breadcrumb__item {
      flex: 0 1 auto;
      max-inline-size: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .breadcrumb__item--current {
      flex: 1 1 auto;
    }
  }
}