/**
 * Two Column Lists — centered heading, two card columns, optional alert + CTA
 */

.two-column-lists-heading {
	margin: 0 0 var(--text-spacing-large);
	text-align: center;
}

/*** Alert Bar ***/

.two-column-lists-alert {
	align-items: center;
	background: var(--husky-blue-25);
	border-radius: var(--border-radius-normal);
	color: var(--russian-blue);
	display: flex;
	gap: var(--text-spacing-xsmall);
	margin-bottom: var(--text-spacing-large);
	padding: var(--text-spacing-xsmall) var(--text-spacing-medium);
}

.two-column-lists-alert svg {
	flex-shrink: 0;
	font-size: calc(16rem / 16);
}

.two-column-lists-alert p {
	font-size: calc(15rem / 16);
	margin: 0;
}

/*** Cards ***/

.two-column-lists-card {
	background: var(--appaloosa-beige);
	border: none;
	border-radius: var(--border-radius-large);
	grid-column: span 6;
	padding: calc(var(--text-spacing-large) + 16px) var(--text-spacing-large);
}

.two-column-lists-card .heading-5 {
	margin: 0 0 var(--text-spacing-xsmall);
}

.two-column-lists-card .btn {
	margin-top: var(--text-spacing-small);
}

/** Dark Background (Russian Blue) **/

.module.two-column-lists.background-russian-blue .two-column-lists-card {
	color: var(--russian-blue);
}

.module.two-column-lists.background-russian-blue .two-column-lists-card .heading-5 {
	color: var(--russian-blue) !important;
}

.module.two-column-lists.background-russian-blue .two-column-lists-card .content-styles {
	color: var(--russian-blue);
}

/*** Footer ***/

.two-column-lists-footer {
	margin-top: var(--text-spacing-large);
	text-align: center;
}

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

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

	.two-column-lists-card {
		grid-column: span 12;
	}

	.two-column-lists-grid {
		gap: var(--text-spacing-medium);
	}

}

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

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

	.two-column-lists-card {
		grid-column: 1 / -1;
		padding: var(--text-spacing-medium);
	}

	.two-column-lists-grid {
		gap: 20px;
	}

}