.breadcrumbs {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 4px;
    max-width: 450px;
    color: #ffffff;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
}

.breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin-left: 4px;
}

.breadcrumbs__item span {
    opacity: 0.6;
    cursor: default;
}

.breadcrumbs__item a {
    text-decoration: none;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

@media screen and (min-width: 768px) and (hover: hover) {
    .breadcrumbs__item a {
        opacity: 1;
    }
}