$o-card-grid-mobile-alternate: 740;

.o-card-grid {
	padding-top: space(10);
	margin-bottom: space(8);
	background-image: linear-gradient(to top, transparent, transparent space(10), palette(primary, 600) space(10));

	@include mq($max: $o-card-grid-mobile-alternate) {
		.is-mobile-alternate & {
			background-color: palette(primary, 600);
		}
	}
}


.o-card-grid__heading {
	@include font-size(xxl);
	@include font-weight(light);
	font-family: $font-mokoko;
	color: palette(neutral, 0);
	text-align: center;
	margin-bottom: space(6);

	@include mq($max: $o-card-grid-mobile-alternate) {
		.is-mobile-alternate & {
			display: none;
		}
	}
}


.o-card-grid__main {
	@include contain;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	grid-gap: space(4);
	
	@include mq($max: $o-card-grid-mobile-alternate) {
		.is-mobile-alternate & {
			display: none;
		}
	}
}


@include mq($max: $o-card-grid-mobile-alternate) {
	.o-card-grid__back {
		display: none;

		.is-mobile-alternate & {
			@include contain;
			display: block;
			text-align: center;
			padding-bottom: space(5);
		}
	}
}