.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    font-size: var(--fz-sm);
    color: var(--text-3);
    padding-block: var(--s-4);
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.breadcrumbs__item::after {
    content: '/';
    color: var(--text-3);
}

.breadcrumbs__item:last-child::after {
    display: none;
}

.breadcrumbs__link {
    color: var(--text-2);
    transition: color var(--t-fast);
}

.breadcrumbs__link:hover {
    color: var(--accent);
}

.breadcrumbs__current {
    color: var(--text-1);
}