.hor-scroll {
    pointer-events: auto;
}

.hor-scroll-wrap {
    pointer-events: none;
    position: relative;
}

.hor-scroll-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 5rem;
	background-image: linear-gradient(to left, black, rgba(255, 255, 255, 0));
	transision: all linear 0.3s;
}

.hor-scroll-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 5rem;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	transision: all linear 0.3s;
}

.hor-scroll-wrap.scrolled-right::after {
    pointer-events: none;
	background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}

.hor-scroll-wrap.scrolled-left::before {
    pointer-events: none;
	background-image: linear-gradient(to right, black, rgba(255, 255, 255, 0));
}