// Component settings: USP
// ------------------------------------------

$o-usp: (
	'background-color':  	palette(primary),
	'text-color':			    palette(text-on-primary),
);

// ------------------------------------------


.o-usp {
	@include mq($max: l) {
		background-color: map-get($o-usp, 'background-color');
	}
}

.o-usp__main {
	@include mq(m){
		@include flex(row);
	}
}

.o-usp__text {
	padding: space(4) 0;
	color: map-get($o-usp, 'text-color');
	background-color: map-get($o-usp, 'background-color');

	@include mq(m) {
		width: column(5, 8);
		padding: {
			top: column(0.5, 8);
			bottom: column(0.5, 8);
			left: 0;
			right: column(1, 8);
		}
	}

	@include mq(l) {
		width: column(6);
		padding: column(0.5) column(1);
	}
}

.o-usp__image {
	background-position: 50% 50%;
	background-size: cover;

	@include mq($max: m) {
		margin-left: -$site-gutter-width;
		margin-right: -$site-gutter-width;
		padding-bottom: 65%;
		min-height: 360px;
	}

	@include mq(m, l) {
		width: column(4, 8);
		margin-right: column(-1, 8);
	}

	@include mq(l) {
		width: column(6);
	}
}

.o-usp__heading {
	@include font-size(xl);
	margin-bottom: space(3);
	color: map-get($o-usp, 'text-color');
}

.o-usp__list {
	list-style-type: none;
	margin-left: 16px;
}

.o-usp__item {
	@include owl(space(2));
	position: relative;
	padding-left: space(2);

	&::before {
		$width: 16px;
		$height: 12px;

		content:'';
		position: absolute;
		top: 5px;
		left: -#{$width};
		width: $width;
		height: $height;
		background-image: url(/img/check/checked.svg);
		background-size: $width $height;
	}
}

.o-usp__action {
	margin-top: space(6);
}

.o-usp__image {
	background-color: palette(neutral);
	background-repeat: no-repeat;
}