$o-double-image-bp1: 1100;


.o-double-image {
	text-align: center;

	// Set side by side from medium viewports and up
	@include mq($o-double-image-bp1) {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}


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

	@include mq($o-double-image-bp1) {
		width: calc((100% - 4px) / 2);
		display: flex;
		justify-content: flex-end;

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

	img {
		width: 100%;
	}
}


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

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