$o-text-image-bp1: m;
$o-text-image-bp2: l;


.o-text-image {
	@include contain;
	position: relative;

	@include mq($o-text-image-bp1) {
		display: flex;
		justify-content: space-between;
	}
}


.o-text-image__description {
	margin-bottom: space(5);

	p, ul {
		max-width: 480px;
	}

	@include mq($o-text-image-bp1){
		width: column(5.5);
		margin-bottom: 0; // reset
	}
}


.o-text-image__visual {
	@include mq($o-text-image-bp1) {
		width: 50%;
	}
}


// Modifier for reversing: Image first, then text
.o-text-image--is-reversed {
	@include mq($o-text-image-bp1) {
		flex-direction: row-reverse;
	}
}