.breadcrumb {
    padding: 12px 0 12px 0;
    background-color: #ffffff;
}

.breadcrumb::after {
    display: block;
    clear: both;
    content: " ";
}

.breadcrumb__item {
    display: inline-block;
    margin-right: 12px;
    list-style: none;
    color: #131518;
    position: relative;
}

.breadcrumb__item a {
    color: var(--main-color);
    text-decoration: none;
}

.breadcrumb__item a:hover {
    color: #000;
}

.breadcrumb__item::after {
    display: block;
    width: 14px;
    height: 15px;
    color: #b6af96;
    content: "";
    position: absolute;
    top: 4px;
    right: -18px;
    background: url('data:image/svg+xml;utf8,<svg  width="10px" height="10px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" ><path fill="#b6af96" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z" class=""></path></svg>');
    background-repeat: no-repeat;
}

.breadcrumb__item:last-child a {
    color: #5a5a5a;
}

.breadcrumb__item:last-child::after {
    content: "" !important;
    display: none;
}

@media screen and (max-width: 400px) {
    .breadcrumb__item {
        font-size: 13px;
    }
}

@media screen and (max-width: 360px) {
    .breadcrumb__item {
        font-size: 12px;
    }
}