@media (max-width: 63.999rem) {
    .crumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-block-end: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .crumbs::-webkit-scrollbar {
        display: none;
    }

    .crumbs > li {
        flex: none;
        white-space: nowrap;
    }

    .crumbs-nav {
        position: relative;
        flex: 1 1 100%;
        min-width: 0;
    }

    .crumbs-nav.is-scrollable::after,
    .crumbs-nav.is-scrollable::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;
        width: 2rem;
        pointer-events: none;
        transition: opacity 0.16s;
    }

    .crumbs-nav.is-scrollable::after {
        right: 0;
        background: linear-gradient(to right, transparent, var(--surface));
        opacity: 1;
    }

    .crumbs-nav.is-scrollable::before {
        left: 0;
        background: linear-gradient(to left, transparent, var(--surface));
        opacity: 0;
    }

    .crumbs-nav.is-scrollable.is-end::after {
        opacity: 0;
    }

    .crumbs-nav.is-scrollable:not(.is-start)::before {
        opacity: 1;
    }
}