$o-double-image-bp1: 1100;


.o-double-image {
	margin: -1px;
	text-align: center;

	// Set side by side from medium viewports and up
	@include mq($o-double-image-bp1) {
		display: flex;
	}
}


.o-double-image__picture {
	display: block;
	margin: 1px;
	order: 1;

	@include mq($o-double-image-bp1) {
		width: column(6);
		display: flex;
		justify-content: flex-end;

		&:last-child {
			justify-content: flex-start;
		}
	}
}


.o-double-image__img {
	object-fit: cover;
	max-height: 85vh;
}


.o-double-image--is-reversed {
	& .o-double-image__picture {
		justify-content: flex-start;

		&:last-child {
			order: 0;
			justify-content: flex-end;
		}
	}
}