.wi-donation-banner {
	background: var(--wp--preset--color--surface);
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1400px;
	height: 401px;
	padding: 64px 100px;
}

.wi-donation-banner__inner {
	max-width: 1000px;
}

/* `body #page h2` from the Customizer outranks a plain class selector, so the
   Figma component size needs matching specificity to survive. */
body #page .wi-donation-banner__title,
.wi-donation-banner__title {
	color: var(--wi-teal-deep);
	font-size: var(--wi-heading-cta);
	line-height: var(--wi-heading-cta-line);
	margin-bottom: 40px;
	max-width: 952px;
}

.wi-donation-banner .wi-actions {
	gap: 20px;
}

@media (max-width: 767.98px) {
	.wi-donation-banner {
		height: auto;
		margin-inline: 0;
		padding: 64px 32px;
	}

	.wi-donation-banner .wi-actions {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.wi-donation-banner .wi-button {
		width: 100%;
	}

	body #page .wi-donation-banner__title,
	.wi-donation-banner__title {
		font-size: 28px;
		line-height: 1.1;
		margin-bottom: 40px;
	}

	/* No side padding so each label stays on one line. */
	.wi-donation-banner .wi-button {
		padding-inline: 0;
		text-align: center;
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 1899px) {
	.wi-donation-banner {
		height: auto;
		min-height: clamp(300px, 26vw, 401px);
		padding: clamp(40px, 3.8vw, 64px) clamp(48px, 6vw, 100px);
	}

	body #page .wi-donation-banner__title,
	.wi-donation-banner h2 {
		font-size: clamp(36px, 3.2vw, 50px);
		line-height: 1.2;
	}
}