.breadcrumbs {
    position: relative;
    padding: 0;
    list-style: none;
    display: flex;
    width: 100%;
    overflow: hidden;
    margin-top: 2.5rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.breadcrumb-item:not(:last-child) {
    flex-shrink: 0;
}


.breadcrumb-item:last-child {
    flex: 1;
    min-width: 0;
}

.breadcrumbs a {
    color: var(---808080);
    text-decoration: none;
    font-size: 0.75rem;
}

/* Only truncate the last span element */
.breadcrumb-item:last-child span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
    font-size: 0.75rem;

}


@media (max-width: 576px) {
    
    .breadcrumb-item:not(:last-child) a {
        max-width: none;
    }
}
.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: .5rem;
    color: var(---808080);
    /* content: var(--bs-breadcrumb-divider, ">"); */
}