.grayscale-image {
    filter: grayscale(1);
    opacity: 0.55;
}


.scroll-wrapper {
    position: relative;
}

.scroll-wrapper::before, .scroll-wrapper::after  {
    content: "";
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    --fade-bg-color: white;
}

.scroll-wrapper::before {
    left: 0; 
    background: linear-gradient(to right, var(--fade-bg-color), transparent);
    opacity: 0;
}

.scroll-wrapper:hover::before,
.scroll-wrapper:focus-within::before {
    opacity: 1;
}
.scroll-wrapper::after {
    right: 0; 
    background: linear-gradient(to left, var(--fade-bg-color), transparent);
    opacity: 1;
}

.disable-scrollbars * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    overflow-x: auto;
    flex-wrap: nowrap;
}

.disable-scrollbars *::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    display: none;
    width: 0;
    height: 0;
}