.flairousel-wrap {
	--carousel_gap: var( --wp--style--block-gap, 1rem );
	margin-bottom: 2rem;
	position: relative;
	padding-inline: 3rem;
}


.wp-block-columns.flairousel {
	display: flex;
	flex-wrap: nowrap !important; /* because WP default styles use importat */
	gap: var( --carousel_gap );
	justify-content: flex-start;
	overflow: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none; /* works with IE & Edge */
	scrollbar-width: none; /* works with  FF */
	overflow-x: scroll; 
}
.wp-block-columns.flairousel::-webkit-scrollbar {
    display: none; /* works with Chrome, Safari, and Opera */
}


.wp-block-columns.flairousel.overflow-auto {
	overflow: auto;
}
.wp-block-columns.flairousel > .wp-block-column {
	flex: 0 0 auto;
	scroll-snap-align: start;
	flex-basis: 100%;
}

.wp-block-columns.flairousel.double > .wp-block-column {
	flex-basis: calc( 50% - var( --carousel_gap ) ) !important;
}
.wp-block-columns.flairousel.triple > .wp-block-column {
	flex-basis: calc( (100% / 3) - var( --carousel_gap ) ) !important;
}

.flairousel-wrap button {
	background-color: var( --clarku-color-black, #212121 );
	border: 0;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
}
.flairousel-wrap button:hover,
.flairousel-wrap button:active {
	background-color: var( --clarku-color-brand, #c00 );
}

.flairousel-wrap button.disabled {
	pointer-events: none;
	opacity: .5;
}


.flairousel-wrap .previous,
.flairousel-wrap .next {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	height: 2em;
	width: 2em;
	position: absolute;
	text-indent: -999em;
	z-index: 2;
}
.flairousel-wrap .previous {

	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12" ><polygon fill="white" points="8,11.8 2.2,6 8,0.2 9.4,1.6 5,6 9.4,10.4 "/></svg>');
	left: -.5em;
	top: calc(50% - 1.6em);
}
.flairousel-wrap .next {
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 12 12" ><polygon fill="white" points="4,11.8 2.6,10.4 7,6 2.6,1.6 4,0.2 9.8,6 "/></svg>');
	right: -.5em;
	top: calc(50% - 1.6em);
}

@media only screen and (min-width:500px) {
	.flairousel-wrap {
		padding-inline: 5rem;
	}
	.flairousel-wrap .previous,
	.flairousel-wrap .next {
		height: 3em;
		width: 3em;
	}
}


.flairousel-wrap .dots {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}

.flairousel-wrap .dot {
	background-color: var( --clarku-color-smoke, #ccc );
	border-radius: 50%;
	height: .75em;
	margin: .5em;
	padding: 0;
	transition: all .2s ease;
	width: .75em;	
}
.flairousel-wrap .dot[data-is-selected="1"] {
	background-color: var( --clarku-color-brand, #c00 );
}