.site-breadcrumb {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 1200px;
    margin: 20px auto;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

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

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

.site-breadcrumb li + li::before {
    content: ">";
    flex: 0 0 auto;
    margin: 0 10px;
    color: #a3a3a3;
}

.site-breadcrumb a,
.site-breadcrumb span[aria-current="page"] {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    word-break: normal;
    overflow-wrap: anywhere;
}

.site-breadcrumb a:hover,
.site-breadcrumb a:focus {
    color: #75ad17;
    text-decoration: underline;
}

.site-breadcrumb a:focus-visible {
    outline: 2px solid #75ad17;
    outline-offset: 2px;
}

.site-breadcrumb span[aria-current="page"] {
    color: #262626;
    font-weight: 500;
}

@media (max-width: 767px) {
    .site-breadcrumb {
        width: calc(100vw - 50px);
        max-width: calc(100vw - 50px);
        margin: 10px 16px 14px;
        font-size: 13px;
    }

    .site-breadcrumb li + li::before {
        margin: 0 7px;
    }

    .site-breadcrumb a,
    .site-breadcrumb span[aria-current="page"] {
        min-height: 44px;
    }
}