.siteBreadcrumb {
    width: min(calc(100% - 2rem), 1300px);
    margin: 1rem auto;
    padding: .75rem 1rem;
    direction: rtl;
    color: #4b5563;
    background: var(--back1-color, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    font-size: .82rem;
    line-height: 1.7;
}

.siteBreadcrumb--contained {
    width: 100%;
    margin: 0 0 1rem;
}

.siteBreadcrumb--full {
    grid-column: 1 / -1;
    width: 100%;
}

.siteBreadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.siteBreadcrumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.siteBreadcrumb li + li::before {
    content: '/';
    margin: 0 .55rem;
    color: #9ca3af;
}

.siteBreadcrumb a,
.siteBreadcrumb span {
    display: block;
    max-width: min(42vw, 30rem);
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.siteBreadcrumb a:hover {
    color: var(--green-color, #15803d);
}

.siteBreadcrumb li:last-child span {
    color: var(--green-color, #15803d);
    font-weight: 700;
}

.siteBreadcrumb--dark {
    color: #dbe5ef;
    background: var(--back1-color, #041c32);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.siteBreadcrumb--dark li + li::before {
    color: #7890a4;
}

.siteBreadcrumb--dark li:last-child span {
    color: #8ee3b0;
}

.siteBreadcrumb--service {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 48px), 1240px);
    margin: 0 auto 1rem;
    color: #c9c7ca;
    background: rgba(20, 21, 25, .9);
    border-color: rgba(216, 179, 87, .16);
    box-shadow: none;
}

.siteBreadcrumb--service li + li::before {
    color: #77757b;
}

.siteBreadcrumb--service a:hover,
.siteBreadcrumb--service li:last-child span {
    color: #e8ca79;
}

@media screen and (max-width: 600px) {
    .siteBreadcrumb {
        width: calc(100% - 1.5rem);
        margin-top: .75rem;
        padding: .6rem .75rem;
        font-size: .75rem;
    }

    .siteBreadcrumb--contained {
        width: 100%;
        margin-top: 0;
    }

    .siteBreadcrumb--service {
        width: calc(100% - 28px);
    }

    .siteBreadcrumb a,
    .siteBreadcrumb span {
        max-width: 48vw;
    }
}