.bc-scroll {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
}

.bc-scroll::-webkit-scrollbar {
    display: none;
}

.bc-scroll > ol {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    padding-right: 30px;
}

.bc-scroll li,
.bc-scroll li > div {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

.bc-scroll a,
.bc-scroll span {
    white-space: nowrap;
}

.bc-scroll svg {
    flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
    .bc-scroll { cursor: grab; }
    .bc-scroll:active { cursor: grabbing; }
}