/* sweep */
.sweep{
	position:relative;
	width:100%;
	min-height:180dvh;
	overflow:visible;
}

.sweep > article{
	position:sticky;
	top:0;
	z-index:1;
	width:100%;
	height:100dvh;
	max-height:100dvh;
	overflow:hidden;
}

.sweep figure.layer_one{
	position:absolute;
	inset:0;
	z-index:1;
	margin:0;
	overflow:hidden;
}

.sweep figure.layer_one img{
	position:absolute;
	top:50%;
	left:0;
	display:block;
	width:auto;
	height:100%;
	min-width:auto;
	max-width:none;
	object-fit:cover;
	object-position:center;
	aspect-ratio:3 / 1;
	transform:translate(0, -50%);
	animation:sweep-x 50s ease-in-out infinite alternate;
	will-change:transform;
}

.sweep figure .overlay {
	position:absolute;
	top:50%;
	left:9%;
	z-index:2;
	width:18%;
	height: 70%;
	transform:translateY(-50%);
	background: linear-gradient(
		90deg,
		rgb(var(--n) / 1) 0%,
		rgb(var(--c1) / 1) 100%
	);
	mix-blend-mode: multiply;
	z-index: 5;
}

.sweep .artxt{
	position:absolute;
	top:50%;
	left:9%;
	z-index:3;
	width:18%;
	overflow:visible;
	pointer-events:auto;
	transform:translateY(-50%);
}

.sweep .artxt dt h2{
	width:200%;
}

.sweep .artxt dt h3{
	display:block;
	width:50%;
	min-width:0;
	max-width:100%;
	white-space:normal !important;
	word-break:normal !important;
	overflow-wrap:break-word;
	hyphens:none !important;
}

.sweep .artxt dd{
	width:100%;
}

@keyframes sweep-x{
	from{
		transform:translate(0, -50%);
	}

	to{
		transform:translate(-16.666%, -50%);
	}
}

.sweep.media-clean .artxt{
	opacity:0 !important;
	pointer-events:none !important;
}

.sweep.media-clean .media-view-toggle{
	display:inline-flex !important;
	opacity:1 !important;
	pointer-events:auto !important;
}

/* sweep mobile */
@media (max-width: 767px) {
	.sweep {
		min-height: 180dvh;
	}
	
	.sweep > article {
		height: 100dvh;
		max-height: 100dvh;
	}

	.sweep figure.layer_one img {
		animation-duration: 40s;
		height: 100dvh;
	}

	.sweep figure .overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
		width: 72%;
		height: 72%;
		transform: translate(-50%, -50%);
		box-sizing: border-box;
	}

	.sweep .artxt,
	.sweep .artxt.layer_two {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 3;
		width: 72%;
		height: 72%;
		padding: 2rem;
		transform: translate(-50%, -50%);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.sweep .artxt dt {
		width: 100%;
	}

	.sweep .artxt dt h2 {
		width: 100%;
		max-width: 100%;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.sweep .artxt dt h3 {
		width: 100%;
		max-width: 100%;
	}

	.sweep .artxt dd {
		width: 100%;
	}
}