$o-card-grid-bp1: 580;
$o-card-grid-bp2: 884;
$o-card-grid-gap: column(0.5,12);


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

.o-card-grid--single-row {
	@include vspacing('padding-bottom' 1);
}


.o-card-grid__list {
	list-style: none;
	margin-left: 0;

	@include mq($o-card-grid-bp1) {
		display: flex;
		flex-wrap: wrap;
		margin: halve(-$o-card-grid-gap);
	}

	.o-card-grid--has-bg & {
		&::before {
			content: '';
			position: absolute;
			top: calc(#{space(12)});
			bottom: calc(#{space(12)});
			left: 0;
			right: 0;
			background-color: palette(neutral, 100);
		}
	}

	// When in single row show a background shade halfway
	.o-card-grid--bg-bottom & {
		@include vspacing('padding-bottom' 0.5);

		&::before {
			bottom: 0;
		}
	}
}


.o-card-grid__item {
	position: relative;
	display: flex;
	justify-content: center;

	@include mq($max: $o-card-grid-bp1) {
		@include owl(space(4));
	}

	@include mq($o-card-grid-bp1) {
		flex: 0 0 calc(#{column(6,12)} - #{$o-card-grid-gap});
		margin: halve($o-card-grid-gap);
	}

	@include mq($o-card-grid-bp2) {
		flex-basis: calc(#{column(4,12)} - #{$o-card-grid-gap});
	}
}