/*===============================================================================
 * Double image in 2 equal columns
 *
 * Until viewport is wide enough the pictures are stacked vertically
 * ============================================================================== */

$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;
	min-height: 360px; // needed for IE

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

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


.o-double-image__img {
	object-fit: cover; // Fallback for IE via JS polyfill, min-height can be needed..
	max-height: 85vh;
}


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

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