$o-card-grid-gap: 			space(6);
$o-card-grid-gap--deluxe: 	space(16);

.o-card-grid {
	position: relative;

	&[data-ornament-type="filled"]::after {
		@include ornament-hex-filled();
		content: '';
		display: block;
	}
}

.o-card-grid__main {
	@include contain;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: $o-card-grid-gap 0;

	&[data-ornament-type="stroked"]::after {
		@include ornament-hex-stroked();
		content: '';
		display: block;
	}
}

.o-card-grid__header {
	width: 100%;
	padding: space(3) 0;

	@include mq($bp-max) {
		width: column(10,12);
	}
}

.o-card-grid__title {
	@include text-style(2);
	color: palette(neutral, 0);
}

.o-card-grid__back {
	margin-top: space(1);
}

.o-card-grid__list {
	display: flex;
	flex-wrap: wrap;

	@include mq(600) {
		margin: 0 -#{halve($o-card-grid-gap)};
	}

	@include mq($max: 1000) {
		flex-wrap: wrap;
	}

	@include mq($bp-max) {
		width: calc(#{column(10,12)} + #{$o-card-grid-gap});
	}
}

.o-card-grid__item {
	flex-basis: auto;
	width: 100%;
	max-width: 290px;
	margin: halve($o-card-grid-gap) auto;

	@include mq(600, 1000) {
		width: calc((100% / 2) - #{$o-card-grid-gap} - 1px); // -1px for rounding in IE

		@supports (clip-path: inset(50%)) {
			&:last-child:nth-child(odd) {
				flex-grow: 0;
				margin: -5% auto halve($o-card-grid-gap);
			}
		}
	}

	@include mq(1000) {
		.o-card-grid__list--deluxe & {
			margin-top: halve($o-card-grid-gap--deluxe);
			margin-bottom: halve($o-card-grid-gap--deluxe);
		}

		max-width: 330px;
		width: calc((100% / 3) - #{$o-card-grid-gap} - 1px); // -1px for rounding in IE
	}
}


// Modifier for 4 cards in a row
.o-card-grid--4 {
	$o-card-grid-gap--4: space(2);

	@include mq($bp-max) {
		& .o-card-grid__list {
			width: 100%;
		}

		.o-card-grid__item {
			margin-left: #{halve($o-card-grid-gap--4)};
			margin-right: #{halve($o-card-grid-gap--4)};
			width: calc((100% / 4) - #{$o-card-grid-gap--4} - 1px); // -1px for rounding in IE
		}
	}
}

.o-card-grid--bg {
	&::before{
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		top: 0;
		left: calc(-50vw + 50%);
		width: 100vw;
		height: 50%;
		background-color: palette(neutral, 100);
	}
}