.slider {
	position: relative;
}

.slider .slides_wrapper {
	overflow-x: auto;
	position: relative;
	max-width: 100%;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.slider .slides_wrapper.disable_scroll_animation {
	scroll-behavior: auto;
}

.slider .slides_track {
	display: flex;
	width: fit-content;
}

.slider .slide {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	margin-right: 5px;
}

@media( min-width: 768px ){
	.slider.disable_snap .slides_wrapper {
		scroll-snap-type: none;
	}
}



.slider .slide:last-child {
	margin-right: 0!important;
}

.slider .arrow {
	position: absolute;
	z-index: 1;
	left: calc( var( --arrow-size ) / -2 );
	padding: 0;
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

.slider .arrow.right {
	left: auto;
	right: calc( var( --arrow-size ) / -2 );
}

.slider .arrow .icon {
    width: 16px;
    height: 24px;
    margin-left: -4px;
    left: calc( var(--arrow-size ) / 3 );
}

.slider .arrow.right {
	right: calc( var(--arrow-size ) / -3 );
}

.slider .arrow.right .icon {
    transform: rotate( 180deg );
}

.slider .left_drag,
.slider .right_drag {
	display: block;
	border-radius: 100%;
	height: 100%;
	background-color: black;
}
	
@media( max-width: 500px ){

	.slider .arrow.left {
		left: 0;
	}

	.slider .arrow.right {
		right: 0;
	}
}