@charset "utf-8";

/* MEDIA IMAGE COLLAGE */
.image-collage {
	--padding-top: var(--space-lg);
	--overlap: 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: var(--margin-block) 0;
	position: relative;
	}
@media (min-width: 40em) {
	.image-collage {
		--overlap: 4rem;
		}
}
@media (min-width: 40em) {
	.image-collage-right-bottom,
	.image-collage-left-bottom {
		--overlap: 6rem;
		}
}

.image-collage-column {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--gap-small);
	min-width: 0;
	position: relative;
	}
.image-collage-top-left .image-collage-column-right,
.image-collage-top-right .image-collage-column-left {
	z-index: 1;
	}
.image-collage-top-left .image-collage-column-left,
.image-collage-top-right .image-collage-column-right {
	z-index: 2;
	}
.image-collage-top-left .image-collage-column-left,
.image-collage-left-bottom .image-collage-column-left,
.image-collage-right-bottom .image-collage-column-left {
	margin-right: calc(var(--overlap) * -1);
	}
.image-collage-top-right .image-collage-column-right,
.image-collage-left-bottom .image-collage-column-right,
.image-collage-right-bottom .image-collage-column-right {
	margin-left: calc(var(--overlap) * -1);
	}
.image-collage-right .image-collage-column-right {
	padding-top: var(--padding-top);
	}
.image-collage-right-more .image-collage-column-right {
	padding-top: calc(var(--padding-top) * 2);
	}
.image-collage-left .image-collage-column-left {
	padding-top: var(--padding-top);
	}
.image-collage-left-more .image-collage-column-left {
	padding-top: calc(var(--padding-top) * 2);
	}
.image-collage-center {
	align-items: center;
	}

.image-collage-right-bottom,
.image-collage-left-bottom {
	grid-template-rows: auto auto;
	}
	.image-collage-right-bottom > .image-collage-column-left {
		grid-area: 1 / 1 / span 1 / span 1;
		}
	.image-collage-right-bottom > .image-collage-column-right {
		grid-area: 2 / 2 / span 1 / span 1;
		}
	.image-collage-left-bottom > .image-collage-column-left {
		grid-area: 2 / 1 / span 1 / span 1;
		}
	.image-collage-left-bottom > .image-collage-column-right {
		grid-area: 1 / 2 / span 1 / span 1;
		}
	.image-collage-right-bottom > .image-collage-column-right,
	.image-collage-left-bottom > .image-collage-column-left {
		margin-top: calc(var(--padding-top) * -2);
		}

.image-collage-column-left > .image-collage-item:nth-child(2) {
	margin-top: calc(var(--padding-top) * -1);
	left: calc(var(--padding-top) * 1);
	}
.image-collage-column-right > .image-collage-item:nth-child(2) {
	margin-top: calc(var(--padding-top) * -1);
	right: calc(var(--padding-top) * 1);
	}
.image-collage-item {
	border: 5px solid var(--hue-white);
	min-width: 0;
	position: relative;
	}
.image-collage-item-inner {
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
	}
.image-collage-item-img-src {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
	}

@media (max-width: 90em) {
	.image-collage {
		--expand-x: 0;
		}
}