.grab-scroll {
    position: relative;
    display: flex;
}

.grab-scroll .scrollable {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
}
.grab-scroll .scrollable::-webkit-scrollbar {
    display: none;
}

.grab-scroll :is(.arrow-left, .arrow-right) {
    position: absolute;
    height: 100%;
    width: 3rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 1000;
}
.grab-scroll .arrow-left {
    justify-content: start;
    background: linear-gradient(270deg, color-mix(in srgb, var(--bg-color), transparent 100%) 0%, var(--bg-color) 100%);
    left: -1px;
}
.grab-scroll .arrow-right {
    justify-content: end;
    background: linear-gradient(270deg, var(--bg-color) 0%, color-mix(in srgb, var(--bg-color), transparent 100%) 100%);
    right: -1px;
}