/*
 * Split from components.css. Selectors unchanged.
 * Stormwater Stories.
 */

/* ---------- Stormwater band ---------- */

.wpx-stormwater-band {
	color: var(--c-white);
	background-color: var(--wpx-landscape-bg, var(--c-dk-blue));
}

.wpx-stormwater-band__intro {
	max-width: var(--w-content);
	margin-bottom: var(--sp-8);
	font-weight: 400;
	line-height: var(--lh-body);
}

.wpx-stormwater-band__intro p {
	margin: 0;
}

.wpx-stormwater-band__intro p + p {
	margin-top: var(--sp-5);
}

.wpx-stormwater-band__toolkits {
	display: grid;
	gap: var(--sp-7);
	align-items: center;
}

.wpx-stormwater-band__copy h2 {
	margin: 0 0 var(--sp-4);
	color: inherit;
	font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem);
	font-weight: 500;
}

.wpx-stormwater-band__copy p {
	margin: 0;
	max-width: 36rem;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.wpx-stormwater-band__cards .wpx-card__link,
.wpx-stormwater-band__cards .wpx-card__title,
.wpx-stormwater-band__cards .wpx-eyebrow {
	color: inherit;
}

@media (width >= 56rem) {
	.wpx-stormwater-band__toolkits {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--sp-8);
	}
}

.wpx-gallery-carousel--stormwater {
	padding-block-start: 0;
	color: var(--c-white);
	background-color: var(--wpx-landscape-bg, var(--c-dk-blue));
}

.wpx-gallery-carousel--stormwater .wpx-carousel__nav {
	border-color: rgb(255 255 255 / 45%);
	color: inherit;
}

.wpx-gallery-carousel--stormwater .wpx-carousel__nav:hover:not([disabled]) {
	border-color: rgb(255 255 255 / 70%);
	background: rgb(255 255 255 / 12%);
	color: inherit;
}

.wpx-gallery-carousel--stormwater .wpx-figure__caption {
	color: rgb(255 255 255 / 0.78);
}

.wpx-hero--gradient.wpx-hero--stormwater .wpx-hero__subtitle {
	max-width: 40rem;
	margin-top: var(--sp-4);
	color: rgb(255 255 255 / 92%);
	font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.1rem);
	font-weight: 300;
	line-height: 1.55;
}