@layer components {

    .crumbs__list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-1) var(--s-2);
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .crumbs__item + .crumbs__item::before {
        content: '/';
        margin-right: var(--s-2);
        opacity: .5;
    }

    .crumbs__item a:hover {
        color: var(--c-ink);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .crumbs__item[aria-current="page"] {
        color: var(--c-ink);
    }

}