#breadcrumps-article-navigation {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;

    font-family: var(--main-font);
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

#breadcrumps-article-navigation ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

#breadcrumps-article-navigation li {
    display: inline-flex;
    align-items: center;
}

/* Put "/" after every element expect the last */
#breadcrumps-article-navigation li:not(:last-child)::after {
    content: " /";
    margin: 0 6px;
    color: #9ca3af;
}

#breadcrumps-article-navigation a {
    text-decoration: none;
    color: #345365;
    font-weight: 500;
}

#breadcrumps-article-navigation a:hover {
    text-decoration: none; /* no underline */
    opacity: 0.85;         /* hover effect */
}

@media (max-width: 767px) {
    #breadcrumps-article-navigation {
        white-space: normal; /* allow wrapping within the container */
    }

    #breadcrumps-article-navigation ol {
        flex-wrap: wrap; /* allow newline between <li> */
    }

    #breadcrumps-article-navigation li {
        white-space: nowrap; /* disallow wrapping INSIDE a separate element */
    }
}