.kl-cutout-parallax {
	--kl-cutout-bg: #080706;
	--kl-cutout-radius: 32px;
	--kl-cutout-shadow: 0 42px 140px rgba(0, 0, 0, 0.34);
	position: relative;
	min-height: 180vh;
	background: var(--kl-cutout-bg);
	overflow: clip;
	isolation: isolate;
}

.kl-cutout-parallax__stage {
	position: sticky;
	top: 0;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
}

.kl-cutout-parallax__media,
.kl-cutout-parallax__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	will-change: clip-path, border-radius, transform;
}

.kl-cutout-parallax__image :is(img, picture),
.kl-cutout-parallax__image:is(img, picture),
.kl-cutout-parallax__media :is(img, picture),
.kl-cutout-parallax__media:is(img, picture) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

.kl-cutout-parallax__content {
	position: relative;
	z-index: 2;
	display: grid;
	min-height: 100vh;
	align-content: end;
	width: min(920px, calc(100vw - 40px));
	padding: clamp(28px, 7vw, 96px);
	color: #fff7ea;
	pointer-events: none;
}

.kl-cutout-parallax__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.58)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.08) 58%, rgba(0, 0, 0, 0.32));
	pointer-events: none;
}

.kl-cutout-parallax[data-kl-cutout="vertical"] .kl-cutout-parallax__content {
	align-content: center;
}

@media (max-width: 767px) {
	.kl-cutout-parallax {
		min-height: 150vh;
	}

	.kl-cutout-parallax__content {
		padding: 28px 20px 54px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kl-cutout-parallax {
		min-height: 100vh;
	}

	.kl-cutout-parallax__stage {
		position: relative;
	}
}