$o-slogan-bp1: 850;
$o-slogan-bp2: 1100;


.o-slogan {
	@include vspacing(
		'margin-top' 1,
		'margin-bottom' 1
	);

	@include mq($max: $o-slogan-bp1) {
		background-color: palette(secondary, 100);
	}
}


.o-slogan__main {
	@include contain;
	position: relative;
	padding: space(7) 0;

	@include mq($o-slogan-bp1) {
		display: flex;
	}

	// Background-color with skewed edge
	@include mq($o-slogan-bp1) {
		&:after {
			content: '';
			position: absolute;
			z-index: -1;
			top: 0;
			bottom: 0;
			left: -100vw;
			right: column(-1);
			background-color: palette(secondary, 100);
			transform: skew($site-skew-angle);
			transform-origin: top right;
		}
	}
}


.o-slogan__figure {
	max-width: 240px;
	margin: 0 auto;

	@include mq($o-slogan-bp1) {
		flex: 0 0 column(3);
	}
	@include mq($o-slogan-bp2) {
		flex-basis: column(2.5);
		margin-left: column(0.5);
	}
}


.o-slogan__content {
	@include mq($max: $o-slogan-bp1) {
		margin-top: space(4);
	}
	@include mq($o-slogan-bp1) {
		flex: auto;
		margin-left: column(1);
		margin-right: column(1.5);
	}
}


.o-slogan__title {
	margin-bottom: space(3);
	color: palette(tertiary, 400);
}


.o-slogan__desc {

}