$o-card-grid-bp1: 600;
$o-card-grid-bp2: 1000;

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

.o-card-grid {
	position: relative;
}

.o-card-grid__main {
	@include contain;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: 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;
	justify-content: center;
	width: 100%;

	@include mq($o-card-grid-bp1) {
		justify-content: flex-start;
		margin: 0 -#{halve($o-card-grid-gap)};
	}

	@include mq($max: $o-card-grid-bp2) {
		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%;
	margin: halve($o-card-grid-gap);

	@include mq($max: $o-card-grid-bp1) {
		max-width: 300px;
	}

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

		// Pull up last card (when odd number, not first)
		@supports (clip-path: inset(50%)) {
			&:last-child:nth-child(2n+3) {
				flex-grow: 0;
				margin: -5% auto halve($o-card-grid-gap);
			}
		}
	}

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

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

// We want to hide the cta-item when the grid shows 3 in a row (specific viewport),
// and it is the last item, but the first in a new row.
@include mq($o-card-grid-bp2) {
	.o-card-grid__item--cta {
		&:nth-last-child(1):nth-child(3n+1) {
			display: none;
		}
	}
}