@layer components {
  .breadcrumb {
    width: 100%;
    padding-block-end: var(--space-md);
  }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm-x1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x1);
  }

  .breadcrumb__link {
    font-size: var(--font-size-sm-x1);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset-2);
  }

  .breadcrumb__link:hover,
  .breadcrumb__link:active {
    color: var(--color-primary-5);
  }

  .breadcrumb__current {
    color: var(--color-neutral-5);
    font-size: var(--font-size-sm-x1);
  }

  .breadcrumb__separator {
    color: var(--color-neutral-3);
    font-size: var(--font-size-sm-x1);
  }

  /* --- Media queries --- */

  /* break-sm-x2: 40rem (640px) */
  @media (width >=40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >=48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >=64rem) {
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >=80rem) {
  }
}