/*******************************************************
 * Image Styles
 *
 * Includes custom styling for the Image pattern
 *
 *******************************************************/

/*******************************************************
 * DEFAULT IMAGE STYLES
 *******************************************************/

.image__content img.variant-default {
	width: 400px;
}

/*******************************************************
 * HERO IMAGE STYLES
 *******************************************************/
.image__content img.variant-hero {
	width: 1000px;
}

/*******************************************************
 * TRIPTYCH IMAGE STYLES
 *******************************************************/

.variant-hero_triple {
	display: flex;
	flex-direction: row;
	height: auto;
}

.variant-hero_triple .image__content-left,
.variant-hero_triple .image__content-right {
	flex: 0 0 25%;
	max-height: 550px;
	overflow: hidden;
}

.variant-hero_triple .image__content-main {
	flex: 0 0 50%;
	z-index: 10;
}

.variant-hero_triple .image__content-left img {
	filter: opacity(0.2) brightness(0.8);
	margin: 6em 2em 0 0;
	object-fit: cover;
	object-position: left;
	transform: scale(1.5);
	width: 25vw;
	height: 550px;
	/* max-width:inherit; */
}

.variant-hero_triple .image__content-main img {
	object-fit: cover;
	object-position: top;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 50vw;
	height: 550px;
	/* z-index: 10; */
	/* max-width:inherit; */
}

.variant-hero_triple .image__content-right img {
	filter: opacity(0.2) brightness(0.8);
	margin: 6em 0 0 2em;
	object-fit: cover;
	object-position: right;
	transform: scale(1.5);
	width: 25vw;
	height: 550px;
	/* max-width:inherit; */
}