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

$o-double-image-bp1: 686;

.o-double-image {
	@include template(a, b);
	display: grid;
	grid-row-gap: space(4);
	grid-column-gap: column(1,12);
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: "a" "b";

	// Set side by side from medium viewports and up
	@include mq($o-double-image-bp1) {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: "a b"
	}
}


.o-double-image__a {
	display: block;
}


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


.o-double-image--is-reversed {
	grid-template-areas: "b" "a";

	@include mq($o-double-image-bp1) {
		grid-template-areas: "b a"
	}
}