/* Pixel slots use the inner content container, except Principal, whose
 * illustrations are direct children of the full-width block shell. */
.reread-block > .reread-block__container {
	position: relative;
}

.reread-block .reread-illustration--pixels {
	display: block;
	position: absolute;
	width: var(--reread-ill-w, 300px);
	height: auto;
	max-width: none;
	margin: 0;
	z-index: 2;
	--reread-illustration-parallax-factor: 0.08;
	transform: translate3d(0, var(--reread-illustration-parallax-offset, 0px), 0);
}

.reread-block .reread-illustration--pixels.reread-illustration--top-left { left: var(--reread-ill-x, 0px); top: var(--reread-ill-y, 0px); }
.reread-block .reread-illustration--pixels.reread-illustration--top-right { right: var(--reread-ill-x, 0px); top: var(--reread-ill-y, 0px); }
.reread-block .reread-illustration--pixels.reread-illustration--bottom-left { left: var(--reread-ill-x, 0px); bottom: var(--reread-ill-y, 0px); }
.reread-block .reread-illustration--pixels.reread-illustration--bottom-right { right: var(--reread-ill-x, 0px); bottom: var(--reread-ill-y, 0px); }

@media (min-width: 782px) {
	.reread-block .reread-illustration--pixels.reread-illustration--hidden-desktop { display: none; }
}

@media (max-width: 781px) {
	.reread-block .reread-illustration--pixels { width: var(--reread-ill-w-m, 160px); }
	.reread-block .reread-illustration--pixels.reread-illustration--top-left { left: var(--reread-ill-x-m, 0px); top: var(--reread-ill-y-m, 0px); }
	.reread-block .reread-illustration--pixels.reread-illustration--top-right { right: var(--reread-ill-x-m, 0px); top: var(--reread-ill-y-m, 0px); }
	.reread-block .reread-illustration--pixels.reread-illustration--bottom-left { left: var(--reread-ill-x-m, 0px); bottom: var(--reread-ill-y-m, 0px); }
	.reread-block .reread-illustration--pixels.reread-illustration--bottom-right { right: var(--reread-ill-x-m, 0px); bottom: var(--reread-ill-y-m, 0px); }
	.reread-block .reread-illustration--pixels.reread-illustration--hidden-mobile { display: none; }
}

.editor-styles-wrapper .reread-illustration--pixels { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.reread-block .reread-illustration--pixels { transform: none; }
}