.custom-image-slider {
	--cis-slide-width: min(54vw, 1100px);
	--cis-height: 620px;
	--cis-side-width: 42%;
    --cis-side-inset: 5%;
	--cis-gap: 18px;
	--cis-duration: 750ms;
	--cis-padding-top: 95px;
	--cis-padding-bottom: 75px;
	--cis-controls-gap: 38px;
	--cis-image-zoom: 1.06;
	--cis-easing: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding: var(--cis-padding-top) 0 var(--cis-padding-bottom);
	overflow: hidden;
	background: transparent !important;
	box-sizing: border-box;
}

.custom-image-slider *,
.custom-image-slider *::before,
.custom-image-slider *::after {
	box-sizing: border-box;
}

.custom-image-slider__controls {
	width: var(--cis-slide-width);
	margin: 0 auto var(--cis-controls-gap);
	padding-inline: var(--cis-gap);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

.custom-image-slider__arrow {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	display: inline-grid;
	place-items: center;
	background: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	color: #171717;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.custom-image-slider__arrow svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.custom-image-slider__arrow:hover,
.custom-image-slider__arrow:focus-visible {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #1268ff;
	transform: scale(1.08);
}

.custom-image-slider__arrow:focus-visible,
.custom-image-slider:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.custom-image-slider__arrow:disabled {
	opacity: .25;
	cursor: default;
	transform: none;
}

.custom-image-slider__viewport {
	position: relative;
	width: 100%;
	height: var(--cis-height);
	overflow: hidden;
	touch-action: pan-y pinch-zoom;
	cursor: grab;
}

.custom-image-slider__viewport.is-dragging {
	cursor: grabbing;
}

.custom-image-slider__track {
	display: flex;
	height: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform var(--cis-duration) var(--cis-easing);
	will-change: transform;
}

.custom-image-slider__track.is-instant {
	transition: none;
}

.custom-image-slider__slide {
	position: relative;
	flex: 0 0 var(--cis-slide-width);
	height: 100%;
}

.custom-image-slider__card {
	position: absolute;
	top: var(--cis-side-inset);
	bottom: var(--cis-side-inset);
	width: var(--cis-side-width);
	display: block;
	overflow: hidden;
	background: transparent !important;
	text-decoration: none;
	transition: width var(--cis-duration) var(--cis-easing), top var(--cis-duration) var(--cis-easing), bottom var(--cis-duration) var(--cis-easing);
	will-change: width, top, bottom;
}

.custom-image-slider__slide.is-before .custom-image-slider__card {
	right: var(--cis-gap);
	left: auto;
}

.custom-image-slider__slide.is-after .custom-image-slider__card {
	right: auto;
	left: var(--cis-gap);
}

.custom-image-slider__slide.is-active .custom-image-slider__card {
	right: auto;
	left: var(--cis-gap);
    top: 0;
    bottom: 0;
	width: calc(100% - (var(--cis-gap) * 2));
}

.custom-image-slider__card img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: scale(var(--cis-image-zoom));
	transition: transform calc(var(--cis-duration) * 1.25) var(--cis-easing);
	user-select: none;
	-webkit-user-drag: none;
}

.custom-image-slider__slide.is-active .custom-image-slider__card img {
	transform: scale(1);
}

.custom-image-slider__slide.is-active .custom-image-slider__card:hover img {
	transform: scale(1.035);
}

.custom-image-slider__card[data-empty-link="true"] {
	cursor: default;
}

.custom-image-slider.is-resetting .custom-image-slider__track,
.custom-image-slider.is-resetting .custom-image-slider__card,
.custom-image-slider.is-resetting .custom-image-slider__card img {
	transition: none !important;
}

@media (max-width: 767px) {
	.custom-image-slider {
		--cis-slide-width: 84vw;
		--cis-height: 360px;
		--cis-side-width: 68%;
        --cis-side-inset: 4%;
		--cis-gap: 7px;
		--cis-padding-top: 48px;
		--cis-padding-bottom: 36px;
		--cis-controls-gap: 20px;
	}

	.custom-image-slider__arrow {
		width: 34px;
		height: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-image-slider__track,
	.custom-image-slider__card,
	.custom-image-slider__card img,
	.custom-image-slider__arrow {
		transition-duration: 1ms !important;
	}
}