/* 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;
	width: 36%;
	top: 50%;
	left: 54%;
	margin: 0;
	padding: 3rem;
	color: rgb(var(--b) / 1);
	border-radius: 1rem;
	pointer-events: auto;
	z-index: 3;
	--x0: -5%;
	--x1: 0%;
	--y0: -50%;
	--y1: -50%;
	--scale0: 1.1;
	--scale1: 1;
	--op0: 0;
	--op1: 1;
	--blur0: 4px;
	--blur1: 0px;
	--sat0: 1;
	--sat1: 1;
	--w0: 33%;
	--w1: 36%;
	--tc0: 255, 255, 255;
	--tc1: 123, 211, 43;
	will-change: transform, filter, opacity, width, color;
	overflow: visible;
}

.break .layer_three dt {
	width: 200%;
	padding: 0;
	transform: translateX(-50%);
	text-align: right;
}

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

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