/**
 * Decorative wave bands behind section content.
 * SVGs live in css/images/; both use viewBox 0 0 1510 510.
 */

.waves,
.waves-1,
.waves-2 {
	position: relative;
	isolation: isolate;
	/* If 120vw ::before causes horizontal scroll, add overflow-x: clip here or on the section parent. */
}

.waves > *,
.waves-1 > *,
.waves-2 > * {
	position: relative;
	z-index: 1;
}

.waves::before,
.waves-1::before,
.waves-2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120vw;
	min-width: 100vw;
	aspect-ratio: 1510 / 510;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	z-index: 0;
	pointer-events: none;
}

.waves::before,
.waves-1::before {
	background-image: url("images/waves-1.svg");
}

.waves-2::before {
	background-image: url("images/waves-2.svg");
}