/**
 * Side-by-Side Cards
 *
 * Two or three cards in a row, each with image, heading, copy, and optional CTA.
 */

.module.side-by-side-cards > .container {
	gap: var(--gap);
}

.module.side-by-side-cards.columns-2 > .container {
	grid-template-columns: repeat(2, 1fr);
	position: relative;
}

.module.side-by-side-cards.columns-2 > .container::after {
	background: var(--wolfhound-gray);
	content: '';
	height: 100%;
	left: 50%;
	position: absolute;
	top: 0;
	width: 1px;
}

.module.side-by-side-cards.columns-2 .sbs-card:first-child {
	padding-right: calc(var(--text-spacing-xlarge) + 24px);
}

.module.side-by-side-cards.columns-2 .sbs-card:last-child {
	padding-left: calc(var(--text-spacing-xlarge) + 24px);
}

.module.side-by-side-cards.columns-3 > .container {
	grid-template-columns: repeat(3, 1fr);
}

.module.side-by-side-cards .sbs-card .media {
	aspect-ratio: 1 / 1;
	border-radius: var(--border-radius-large);
	margin-bottom: var(--text-spacing-medium);
}

.module.side-by-side-cards .sbs-card-content > * + * {
	margin-top: var(--text-spacing-small);
}

.module.side-by-side-cards .sbs-card-content > * + .btn {
	margin-top: var(--text-spacing-medium);
}

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

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

	.module.side-by-side-cards.columns-3 > .container {
		grid-template-columns: repeat(2, 1fr);
	}

	.module.side-by-side-cards.columns-2 > .container {
		display: flex;
		flex-direction: column;
		gap: var(--text-spacing-xlarge);
	}

	.module.side-by-side-cards.columns-2 > .container::after {
		display: none;
	}

	.module.side-by-side-cards.columns-2 .sbs-card:first-child {
		padding-right: 0;
	}

	.module.side-by-side-cards.columns-2 .sbs-card:last-child {
		padding-left: 0;
	}

}

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

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

	.module.side-by-side-cards > .container {
		display: flex;
		flex-direction: column;
		gap: var(--text-spacing-xlarge);
	}

	.module.side-by-side-cards.columns-2 > .container::after {
		display: none;
	}

	.module.side-by-side-cards.columns-2 .sbs-card:first-child {
		padding-right: 0;
	}

	.module.side-by-side-cards.columns-2 .sbs-card:last-child {
		padding-left: 0;
	}

	.module.side-by-side-cards.columns-2 .content-styles p + p {
		margin-top: var(--text-spacing-xxsmall);
	}

	.module.side-by-side-cards.columns-3 .sbs-card-content > * + * {
		margin-top: var(--text-spacing-xsmall);
	}

}