@charset "UTF-8";

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

@media (min-width: 768px) {
    .breadcrumb ol {
        row-gap: 8px;
        font-size: var(--font-size-sm);
    }
}

.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin-left: 8px;
    color: #a0a0a0;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}