/* block mobile */
.block {
	--block-dt-base-color: rgb(var(--n-dark) / 1);
	--block-dt-photo-color: rgb(var(--b) / 1);
	flex-direction: column-reverse;
}

.block figure figcaption{
	transform: rotate(-90deg);
	transform-origin: top left;
	bottom: 10%;
}
/* block mobile - text over media */
.block > article:nth-child(1) {
	position: relative;
	width: 100%;
	margin-top: -4rem;
	z-index: 20;
}

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

.block .artxt {
	position: relative;
	width: 100%;
	transform: none;
	z-index: 20;
}

.block.reverse  {
	flex-direction: column;
}

.block.reverse > article:nth-child(2) {
	position: relative;
	width: 100%;
	margin-top: -4rem;
	z-index: 12;
}

.block.reverse > article:nth-child(1) {
	position: relative;
	width: 100%;
	z-index: 1;
}

.block.reverse .artxt {
	position: relative;
	width: 100%;
	transform: none;
}

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

.block.reverse .artxt dt {
	position: relative;
	width: 100%;
	color: transparent;
	text-align: right;
}

/* capas del efecto */
.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,
.block .artxt dt .lead,
.block .artxt dt span {
	color: inherit;
}