nav[aria-label="Breadcrumb"] {
  color: var(--ink-faint);
  font-size: 12px;
  background: color-mix(in srgb, var(--bg) 88%, var(--bg-raised));
  margin: 0;

  > div {
    padding-block: 18px 10px;
  }

  @media (min-width: 40rem) {
    > div {
      padding-block: 22px 10px;
    }
  }

  @media (min-width: 64rem) {
    > div {
      padding-block: 28px 12px;
    }
  }

  ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-width: 0;

    + li::before {
      color: var(--ink-faint);
      content: "›";
    }
  }

  a {
    color: var(--ink-muted);
  }

  span[aria-current="page"] {
    color: var(--ink-faint);
  }
}