
/* START - section culture rules styles */
.scroll-slider:not(.scroll-slider-initiated) {
	display: flex;
	gap: 1rem;
}
.scroll-slider:not(.scroll-slider-initiated) > * { flex-shrink: 0;}
.scroll-slider-initiated {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
.scroll-slider-initiated .mask { width: 100%;}
.scroll-slider-initiated .mask.dragging .slideset { cursor: grabbing; }
.scroll-slider-initiated .slideset {
	width: max-content;
	display: flex;
	gap: 1rem;
	cursor: grab;
	will-change: transform;
}
.scroll-slider-initiated .slider-scroll {
	height: 0.125rem;
	background: var(--i2c-brand-100);
	position: relative;
}
.bg-blue .scroll-slider-initiated .slider-scroll { background: var(--i2c-brand-400);}
.scroll-slider-initiated .slider-scroll .slider-cursor {
	width: 5rem;
	height: 0.125rem;
	background: var(--orange);
	transition: height 0.25s linear;
	position: absolute;
	left: 0;
	bottom: 0;
	cursor: grab;
}
.scroll-slider-initiated .slider-scroll .slider-cursor:where(:hover, :focus-visible) { height: 0.125rem;}
.scroll-slider-initiated .slider-scroll .slider-cursor.dragging { height: 0.125rem; cursor: grabbing;}
/* design screen 768px and above */
@media (min-width: 768px) {
	.scroll-slider-initiated { gap: 2.875rem;}
	.scroll-slider:not(.scroll-slider-initiated),
	.scroll-slider-initiated .slideset { gap: 1.5rem;}
	.scroll-slider-initiated .slider-scroll .slider-cursor { height: 0.25rem;}
	.scroll-slider-initiated .slider-scroll .slider-cursor:where(:hover, :focus-visible),
	.scroll-slider-initiated .slider-scroll .slider-cursor.dragging { height: 0.375rem;}
}
/* design screen 1366px = 1200px and above */
@media (min-width: 1200px) {
	.scroll-slider-initiated { gap: 3.625rem;}
}
/* design screen 1920px = 1601px and above */
@media (min-width: 1601px) {
	.scroll-slider-initiated { gap: 4.875rem;}
	.scroll-slider:not(.scroll-slider-initiated),
	.scroll-slider-initiated .slideset { gap: 2rem;}
}
/* END - section culture rules styles */
