/* 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 */

/* START - arrows-slider variant (additive only; default line/cursor experience above is untouched) */
.scroll-slider-initiated.arrows-slider .mask .slideset {
	cursor: default;
}
.scroll-slider-initiated.arrows-slider .slider-arrows {
	position: static;
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}
.scroll-slider-initiated.arrows-slider .custom-arrow {
	position: static !important;
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	margin: 0 !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #C7E2FF;
	background: #fff;
	color: #000;
	cursor: pointer;
	transition: background 0.2s linear, border-color 0.2s linear, color 0.2s linear;
}
.scroll-slider-initiated.arrows-slider .custom-arrow:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed;
}
.scroll-slider-initiated.arrows-slider .custom-arrow svg {
	pointer-events: none;
	width: 14px;
	height: 26px;
	color: inherit;
}
.scroll-slider-initiated.arrows-slider .custom-arrow:where(:hover, :active, :focus-visible, .active):not(:disabled) {
	background: #1434CB;
	border-color: #1434CB;
	color: #fff;
}
/* design screen 768px and above */
@media (min-width: 768px) {
	.scroll-slider-initiated.arrows-slider .slider-arrows { gap: 1.4rem;}
	.scroll-slider-initiated.arrows-slider .custom-arrow { width: 70px; height: 70px;}
	.scroll-slider-initiated.arrows-slider .custom-arrow svg { width: 16px; height: 30px;}
}
/* END - arrows-slider variant */