/* block */
.block {
	--block-dt-base-color: rgb(var(--n) / 1);
	--block-dt-photo-color: rgb(var(--b) / 1);
}

.block > article:nth-child(1) {
	width: 36%;
	z-index: 2;
}

.block > article:nth-child(2) {
	width: 64%;
}

.block.reverse > article:nth-child(1) {
	width: 64%;
}

.block.reverse > article:nth-child(2) {
	width: 36%;
	z-index: 2;
}

.block .artxt {
	padding-left: 36%;
}

.block.reverse .artxt {
	padding-right: 36%;
	padding-left: 0;
}

.block .artxt dt {
	position: relative;
	width: 200%;
	color: transparent;
}

.block.reverse .artxt dt {
	width: 200%;
	transform: translateX(-50%);
	text-align: right;
}

.block-dt-base,
.block-dt-photo {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.block-dt-base {
	color: var(--block-dt-base-color);
	z-index: 1;
}

.block-dt-photo {
	color: var(--block-dt-photo-color);
	z-index: 2;
	clip-path: inset(0 100% 0 0);
}

.block-dt-real {
	position: relative;
	display: block;
	visibility: hidden;
	pointer-events: none;
	z-index: 0;
}

.block .artxt dt h1,
.block .artxt dt h2,
.block .artxt dt h3,
.block .artxt dt h4,
.block .artxt dt p {
	color: inherit;
}