.cards--wrapper {
	gap: 3rem;
	position: relative;
	padding: 3rem 0 4rem;

	.cards--heading {
		width: 100%;
		z-index: 9;
		h2 {
			color: var(--brand-teal);
			margin: 0;
			font-family: var(--font__serif);
			font-style: italic;
		}
	}

	.cards {
		z-index: 9;
		width: 100%;

		.card--item {
			flex: 1 1 100%;
			padding: 1.5rem 1rem 1.75rem;
			background: var(--brand-light-teal);
			transition: background 0.2s ease-in-out;

			&:hover {
				background: var(--brand-dark-teal);

				.card--heading {
					text-decoration-color: #fff;
					color: #fff;
				}
				.card--content {
					color: #fff;
				}
			}

			.card--heading {
				margin: 0;
				font-size: calc(
					var(--font-size__base, 18px) * var(--font-factor__h4, 1.2)
				);
				text-decoration: underline;
				text-decoration-color: transparent;
				transition:
					color 0.2s ease-in-out,
					text-decoration-color 0.2s ease-in-out;
			}

			.card--content {
				color: var(--theme-text, #595959);
				transition: color 0.2s ease-in-out;
			}
		}
	}
}

@media screen and (min-width: 660px) {
	.cards--wrapper {
		.cards {
			.card--item {
				flex: 0 1 calc(50% - 0.5rem);
			}
		}
	}
}
@media screen and (min-width: 960px) {
	.cards--wrapper {
		.cards {
			.card--item {
				flex: 0 1 calc(25% - 0.75rem);
			}
		}
	}
}