$o-certificates-bp-medium: full-nav;    // set items 2 by 2
$o-certificates-bp-large:  1100;        // set items 4 on a row, but no scrolling


.o-certificates {
	position: relative;
}


.o-certificates__heading {
	@include contain;
	@include font-size(xl);
	@include font-weight(extraBold);
	color: palette(primary, 500);
	margin-bottom: space(6);
	padding-right: space(1);

	.o-certificates--on-dark & {
		color: palette(neutral, 0);
	}
}


.o-certificates__scroller {
	@include contain($o-certificates-bp-medium);
}


.o-certificates__tray {
	display: flex;

	// Only for small viewports we need side scrolling
	@include mq($max: $o-certificates-bp-medium) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;

		&::-webkit-scrollbar {
			display: none;
		}

		// Create fake margin, put 'fake' items to start & end
		&::before,
		&::after {
			content: '';
			display: block;
			flex: 0 0 column(1,14);
		}
	}

	// Make a grid when on desktop sized viewport
	@include mq($o-certificates-bp-medium) {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: space(-2)
	}

}


.o-certificates__item {
	@include mq($max: $o-certificates-bp-medium) {
		flex: 0 0 auto;
		margin-bottom: space(6); // make sure box shadow is visible on bottom

		& + & {
			margin-left: space(4);
		}
	}

	@include mq($o-certificates-bp-medium) {
		margin: space(2);
	}

	@include mq($o-certificates-bp-large) {
		flex: 0 1 calc(#{column(1,4)} - #{space(4)});
		width: calc(#{column(1,4)} - #{space(4)});
	}
}


.o-certificates__card {
	max-width: 264px;
	display: flex;
	height: 100%;
	flex-direction: column;
	padding: space(3);
	background: palette(neutral, 0);
	box-shadow: 0 20px 48px 0 rgba(0,0,0,0.08);
	border-radius: map_get($border-radius, s) map_get($border-radius, s) map_get($border-radius, l) map_get($border-radius, xs);
	text-decoration: none;
	color: palette(neutral, 700);

	@include mq($o-certificates-bp-medium) {
		min-width: 288px;
	}

	@include mq($o-certificates-bp-large) {
		min-width: auto;
	}

	@include mq($bp-max) {
		border-bottom-right-radius: map_get($border-radius, xl);
	}
}


.o-certificates__picture {
	& img {
		display: block;
		margin: 0 auto;
		object-fit: contain;
		height: 120px;
	}
}


.o-certificates__content {
	display: flex;
	flex-direction: column;
}


.o-certificates__title {
	@include font-size(base);
	@include font-weight(extraBold);
	margin-top: space(6);
	color: palette(neutral, 700);
}


.o-certificates__description {
	margin-top: space(4);
	margin-bottom: space(1);
}