.klb2-slider {
	--klb2-slider-height: 520px;
	--klb2-slider-radius: 36px;
	--klb2-slider-content-width: 36%;
	--klb2-slider-image-position-x: 0%;
	--klb2-slider-image-position-y: 0%;
	--klb2-slider-image-offset-x: 0px;
	--klb2-slider-image-offset-y: 0px;
	--klb2-slider-image-scale: 1;
	--klb2-slider-media-overlap: 10%;
	--klb2-slider-media-extend: 0%;
	--klb2-slider-overlay-color: rgba(238, 244, 251, 0.98);
	--klb2-slider-overlay-soft-color: rgba(238, 244, 251, 0.72);
}

.klb2-slider .klb2-carousel__slide {
	flex-basis: 100%;
}

.klb2-slider__media {
	display: block;
	width: 100%;
	text-decoration: none !important;
	color: inherit;
}

.klb2-slider__frame {
	position: relative;
	display: block;
	width: 100%;
	height: var(--klb2-slider-height);
	overflow: hidden;
	border-radius: var(--klb2-slider-radius);
	background: #dce5ef;
	isolation: isolate;
}

.klb2-slider__media-area {
	position: absolute;
	inset: 0 max(0%, calc(var(--klb2-slider-content-width) - var(--klb2-slider-slide-media-overlap, var(--klb2-slider-media-overlap)) - var(--klb2-slider-slide-media-extend, var(--klb2-slider-media-extend)))) 0 0;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	will-change: transform;
	z-index: 0;
}

.klb2-slider__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: var(--klb2-slider-slide-image-fit, contain);
	object-position:
		calc(var(--klb2-slider-slide-image-position-x, var(--klb2-slider-image-position-x)) + var(--klb2-slider-slide-image-offset-x, var(--klb2-slider-image-offset-x)))
		calc(var(--klb2-slider-slide-image-position-y, var(--klb2-slider-image-position-y)) + var(--klb2-slider-slide-image-offset-y, var(--klb2-slider-image-offset-y)));
	user-select: none;
	-webkit-user-drag: none;
	transform: scale(var(--klb2-slider-slide-image-scale, var(--klb2-slider-image-scale)));
	transform-origin: center center;
}

.klb2-slider__overlay {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(
		90deg,
		rgba(238, 244, 251, 0) 0%,
		rgba(238, 244, 251, 0.03) 46%,
		var(--klb2-slider-overlay-soft-color) 66%,
		var(--klb2-slider-overlay-color) 82%,
		var(--klb2-slider-overlay-color) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.klb2-slider__content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 14px;
	width: min(100%, var(--klb2-slider-content-width));
	max-width: calc(100% - 24px);
	min-width: 0;
	padding: 32px 42px 32px 24px;
	text-align: right;
	z-index: 2;
	overflow: hidden;
}

.klb2-slider__title,
.klb2-slider__subtitle {
	display: block;
	max-width: 100%;
	color: #0f172a;
	text-wrap: balance;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.klb2-slider__title {
	font-size: clamp(30px, 3.7vw, 60px);
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.klb2-slider__subtitle {
	font-size: clamp(18px, 1.8vw, 30px);
	line-height: 1.16;
	font-weight: 600;
}

.klb2-slider .klb2-carousel__arrow--prev {
	left: 18px;
}

.klb2-slider .klb2-carousel__arrow--next {
	right: 18px;
}

.klb2-slider .klb2-carousel__dots {
	margin-top: 20px !important;
}

@media (max-width: 1024px) {
	.klb2-slider {
		--klb2-slider-height: 420px;
		--klb2-slider-content-width: 44%;
		--klb2-slider-media-overlap: 8%;
	}

	.klb2-slider__content {
		padding: 26px 28px 26px 18px;
		gap: 10px;
		max-width: calc(100% - 18px);
	}
}

@media (max-width: 767px) {
	.klb2-slider {
		--klb2-slider-height: 320px;
		--klb2-slider-content-width: 54%;
		--klb2-slider-media-overlap: 6%;
		--klb2-slider-radius: 24px;
	}

	.klb2-slider__overlay {
		background: linear-gradient(
			90deg,
			rgba(238, 244, 251, 0) 0%,
			rgba(238, 244, 251, 0.08) 36%,
			var(--klb2-slider-overlay-soft-color) 60%,
			var(--klb2-slider-overlay-color) 80%,
			var(--klb2-slider-overlay-color) 100%
		);
	}

	.klb2-slider__content {
		padding: 20px 18px 20px 16px;
		gap: 8px;
		max-width: calc(100% - 12px);
	}

	.klb2-slider__title {
		font-size: clamp(24px, 7vw, 40px);
	}

	.klb2-slider__subtitle {
		font-size: clamp(14px, 4.4vw, 22px);
	}
}
