.page-intro {
	background: unset;
	color: unset;
	text-align: unset;
	padding: 0;
	margin-top: 3rem;
	width: var(--layout-full);
	max-width: 100%;
	text-wrap: unset;
}

.page-intro::before,
.page-intro::after {
	content: none;
}

.page-intro h1 {
	width: var(--layout-wide);
	margin-inline: auto;
	margin-bottom: clamp(1rem, 4vw - 0.2rem, 3rem);
	padding: 0 1rem;
}

.intro-content {
	padding: 0 1rem 2rem 3rem;
	position: relative;
}

.intro-content > * {
	max-width: var(--layout-content-width);
}

.intro-content::before {
	position: absolute;
	content: ' ';
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(100% - 2rem);
	background: rgb(var(--color-red));
}

#block-0-1 {
	padding: 2rem 1rem 2rem 3rem;
	position: relative;
	max-width: calc(100% - 4rem);
}

#block-0-1 .content::before {
	position: absolute;
	content: ' ';
	top: 0rem;
	bottom: 0rem;
	z-index: -1;
	left: 0;
	right: calc(100% - 2rem);
	background: rgb(var(--color-magenta));
	z-index: 1;
}

@media(min-width: 52rem) {
	.intro-content {
		padding: 0 2rem 2rem calc(2rem + clamp(0em, 35vw, 24em));
	}

	.intro-content::before {
		right: calc(100% - clamp(0em, 35vw, 24em));
	}

	#block-0-1 {
		padding: 2rem 0;
		width: var(--layout-full);
		max-width: 100%;
	}

	#block-0-1::before {
		position: absolute;
		content: ' ';
		top: 0;
		bottom: 0;
		left: calc(50% - 50vw);
		right: calc(100% - clamp(0em, 35vw, 24em));
		background: rgb(var(--color-red));
		z-index: 1;
	}

	#block-0-1 .content {
		padding: 0 2rem 0 calc(2rem + clamp(0em, 35vw, 24em));
		position: relative;
	}

	#block-0-1 .content::before {
		top: -2rem;
		bottom: -2rem;		
		left: 14rem;
		right: calc(100% - clamp(0em, 35vw, 24em));
	}

	.block-quote .image::after {
		position: absolute;
		content: ' ';
		pointer-events: none;
		top: 0;
		right: 0;
		left: 14rem;
		height: 5rem;
		background: rgb(var(--color-purple));
		mix-blend-mode: multiply;
	}
}