/* break */
.break {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	overflow: hidden;
	opacity: 1;
	z-index: 5;
}

.break > article {
	position: relative;
	width: 100%;
	height: 100%;
}

.break figure {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.break img.responsive-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.break .layer_one {
	z-index: 1;
	pointer-events: none;
}

.break .layer_two {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	--x0: 0%;
	--x1: 0%;
	--y0: 0%;
	--y1: 0%;
	--scale0: 1;
	--scale1: 1;
	--op0: 0;
	--op1: 1;
	--blur0: 0px;
	--blur1: 0px;
	--sat0: 1;
	--sat1: 1;
	will-change: transform, filter, opacity;
}

.break .layer_three {
	position: absolute;
	top: 0;
	left: 9%;
	margin: 0;
	padding: 2rem;
	color: rgb(var(--b) / 1);
	border-radius: 1rem;
	pointer-events: auto;
	z-index: 3;
	--x0: 0%;
	--x1: 0%;
	--y0: 0;
	--y1: 50%;
	--scale0: 1.1;
	--scale1: 1;
	--op0: 0;
	--op1: 1;
	--blur0: 4px;
	--blur1: 0px;
	--sat0: 1;
	--sat1: 1;
	--w0: 81%;
	--w1: 81%;
	--tc0: 255, 255, 255;
	--tc1: 123, 211, 43;
	will-change: transform, filter, opacity, width, color;
}

.break .layer_three dd {
	width: 100%;
	padding: 0;
}

.break-spacer {
	width: 100%;
	height: 150dvh;
	pointer-events: none;
	background: transparent;
}