/**
 * Donation Impact Cards
 */

.module.donation-impact-cards .heading-3 {
	margin: 0 0 var(--text-spacing-large);
	text-align: center;
}

.module.donation-impact-cards ul.grid {
	gap: var(--text-spacing-xsmall);
}

/*** Grid ***/

.module.donation-impact-cards.columns-3 li {
	grid-column: span 4;
}

.module.donation-impact-cards.columns-4 li {
	grid-column: span 3;
}

/** Small Value **/

.module.donation-impact-cards.value-small .amount {
	font-size: calc(32rem / 16);
}

/*** Footnote ***/

.module.donation-impact-cards .footnote {
	margin: var(--text-spacing-large) auto 0;
	max-width: 700px;
	text-align: center;
}

/** Colored Backgrounds **/

.module.donation-impact-cards.background-appaloosa-beige .card.donation,
.module.donation-impact-cards.background-russian-blue .card.donation {
	background: var(--samoyed-white);
	border-color: transparent;
}

.module.donation-impact-cards .card.donation p {
	color: var(--retriever-black);
	margin: 0;
}

/** Animal shape overrides — sit on top of the section curve **/

.module.donation-impact-cards .module-animal-shape.animal-pitbull {
	--animal-shape-offset: -150px;
	bottom: calc(100% - 300px);
}

.module.donation-impact-cards .module-animal-shape.animal-pitbull.module-animal-shape-right {
	transform: scaleX(-1);
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.module.donation-impact-cards.columns-4 li {
		grid-column: span 6;
	}

	.card.donation .amount {
		font-size: calc(40rem / 16);
	}

	.module.donation-impact-cards.value-small .amount {
		font-size: calc(28rem / 16);
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.module.donation-impact-cards li {
		grid-column: 1 / -1;
	}

	.card.donation {
		padding: var(--text-spacing-medium);
	}

	.card.donation .amount {
		font-size: calc(36rem / 16);
	}

	.module.donation-impact-cards.value-small .amount {
		font-size: calc(24rem / 16);
	}

}