/**
 * Feature: Layered Parallax Images
 *
 * Positions a set of scroll-driven images as an absolutely placed collage
 * behind a section's copy, so each layer can be translated at its own rate by
 * the ScrollDetect module (`--cnvs-scroll-percent`).
 *
 * The wrap is pulled out of the flow and pinned to the bottom of its
 * positioned ancestor; every `.parallax-image` is therefore a zero-size static
 * marker whose `img` carries the real placement. Without these rules the five
 * layers fall back into normal flow and stack vertically, which turns a fixed
 * 948px band into a ~3200px column.
 *
 * Loaded conditionally: `canvas_feature_needles()` maps the
 * `parallax-images-wrap` class to this file, so it ships only on requests whose
 * rendered output actually contains the collage.
 *
 * @package Canvas
 * @since   1.0.0
 */

.parallax-images-wrap {
	z-index: -1;
	width: 100vw;
	height: 100%;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2em;
	padding-right: 2em;
	position: absolute;
	top: auto;
	bottom: 0%;
	left: 50%;
	right: auto;
	transform: translate(-50%);
}

.parallax-images-wrap .parallax-image {
	position: static;
	width: auto;
	height: auto;
}

.parallax-images-wrap .parallax-image img {
	position: absolute;
	width: 18.66%;
	top: 12rem;
	left: 2rem;
}

.parallax-images-wrap .parallax-image-1 img {
	top: 16rem;
	width: 22.66%;
	left: 0;
}

.parallax-images-wrap .parallax-image-2 img {
	width: 15%;
	top: auto;
	bottom: 3.5rem;
	left: 18rem;
}

.parallax-images-wrap .parallax-image-3 img {
	width: 18%;
	top: auto;
	bottom: 1rem;
	left: auto;
	right: 32.33333%;
}

.parallax-images-wrap .parallax-image-4 img {
	top: 18rem;
	left: auto;
	right: 10%;
}

.parallax-images-wrap .parallax-image-5 img {
	top: 8rem;
	width: 17%;
	left: auto;
	right: 0%;
}