.th-floating-images {
	position: relative;
	width: 100%;
	/*
	 * Anything hanging below the block has to paint over what follows it,
	 * otherwise the next section simply covers it. __media is pointer-events:
	 * none, so nothing underneath loses its clicks.
	 */
	z-index: 1;
}

/*
 * Every V2 container wraps its content in a __frame with z-index: 2, which is a
 * stacking context. An image hanging below the block is trapped inside it, so
 * the next container — later in the document, same z-index — paints straight
 * over it, and the overflow looks clipped. Lifting the containers that hold the
 * block puts that overhang above whatever follows. 3 stays far below the header
 * and the modals, which sit at 100 and 10000.
 */
.th-container-block:has(.th-floating-images) {
	z-index: 3;
}

/*
 * main.css also puts `overflow: hidden` on every <section>. This block is not
 * inside one on the pages checked, but it would clip on both axes if it were,
 * and the block already clips itself horizontally.
 */
section:has(.th-floating-images) {
	overflow: visible;
}

/*
 * Horizontal overflow has to be clipped out of the layout, not just out of the
 * paint: an image reaching past the right edge used to widen the page and give
 * the whole site a horizontal scrollbar on mobile. clip-path cannot do that —
 * it hides pixels and leaves the scrollable area behind — and `overflow-x: clip`
 * with `overflow-y: visible` turned out to clip vertically too.
 *
 * So both axes are clipped, and the clip box is grown vertically instead:
 * `overflow: clip` cuts at the padding box, so the bleed padding below gives
 * images room to hang out above and below, while the horizontal edges stay
 * exactly where the block ends. The matching negative margins keep the block
 * occupying the same space in the flow as before.
 */
.th-floating-images__viewport {
	/* Covers the furthest an image can be pushed out from the editor. */
	--th-floating-images-bleed: 500px;

	position: relative;
	padding-block: var(--th-floating-images-bleed);
	margin-block: calc(var(--th-floating-images-bleed) * -1);
	overflow: clip;

	/*
	 * The bleed area overlaps whatever sits above and below the block, so it
	 * must not swallow their clicks. __content switches this back on.
	 */
	pointer-events: none;
}

.th-floating-images__media {
	position: absolute;
	/* Insets are measured from the padding box, so the bleed has to be undone
	   here for the images to line up with the block itself. */
	inset: var(--th-floating-images-bleed) 0;
	pointer-events: none;
	z-index: 1;
}

.th-floating-images__image {
	position: absolute;
	top: var(--th-floating-images-mobile-top, unset);
	left: var(--th-floating-images-mobile-left, unset);
	right: var(--th-floating-images-mobile-right, unset);
	bottom: var(--th-floating-images-mobile-bottom, unset);
	width: var(--th-floating-images-mobile-width, 150px);
	height: var(--th-floating-images-mobile-height, 150px);
	overflow: hidden;
}

.th-floating-images__image-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.th-floating-images__content {
	position: relative;
	z-index: 2;
	min-height: var(--th-floating-images-mobile-size, 0px);
	pointer-events: auto;
}

@media (min-width: 992px) {
	.th-floating-images__content {
		min-height: var(--th-floating-images-desktop-size, 0px);
	}

	.th-floating-images__image {
		top: var(--th-floating-images-desktop-top, unset);
		left: var(--th-floating-images-desktop-left, unset);
		right: var(--th-floating-images-desktop-right, unset);
		bottom: var(--th-floating-images-desktop-bottom, unset);
		width: var(--th-floating-images-desktop-width, 200px);
		height: var(--th-floating-images-desktop-height, 200px);
	}
}