.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;

    margin-bottom: 1.4rem;

    font-family: var(--font-content);
    font-size: 0.9rem;
    line-height: 1.2;

    color: var(--col-header-foreground);
}

.breadcrumb_item {
    color: var(--col-header-foreground);
    text-decoration: none;

    max-width: 22rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.breadcrumb_item:hover {
    color: var(--col-link-highlight);
    text-decoration: underline;
}

.breadcrumb_home {
    display: inline-flex;
    align-items: center;

    font-size: 1rem;
}

.breadcrumb_sep {
    font-size: 0.7rem;
    color: var(--col-darkgreen);
    opacity: 0.7;
}

.breadcrumb_current {
    font-weight: 600;
    color: var(--col-base-foreground);
}

@media only screen and (max-width: 45rem) {
    .breadcrumb { margin-bottom: 1rem; }
}