@charset "utf-8";

/* MEDIA */
	.media-image-collage {
		display: grid;
		grid-template-columns: 1fr 30% 1fr;
		margin: var(--mywp-mg-block) 0;
		position: relative;
		}
	.media-image-collage-h-min {
		grid-template-columns: 1fr 25% 1fr;
		}
	.media-image-collage-h-center {
		grid-template-columns: 1fr 33.3333% 1fr;
		}
	.media-image-collage-h-max {
		grid-template-columns: 1fr 75% 1fr;
		}
	.media-image-collage-v-top,
	.media-image-collage-v-min {
		align-items: flex-start;
		}
	.media-image-collage-v-top > .media-image-collage-1 {
		margin-top: 20%;
		}
	.media-image-collage-v-bottom {
		align-items: flex-end;
		}
	.media-image-collage-v-bottom > .media-image-collage-1 {
		margin-bottom: 20%;
		}
	.media-image-collage-v-center {
		align-items: center;
		}
	.media-image-collage-v-min .media-image-collage-2 {
		margin-top: 20%;
		}
	.media-image-collage-v-max {
		align-items: flex-end;
		}
	.media-image-collage-v-max .media-image-collage-2 {
		margin-bottom: 20%;
		}
	.media-image-collage-left > .media-image-collage-1,
	.media-image-collage-right > .media-image-collage-2 {
		grid-column: 1 / span 2;
		}
	.media-image-collage-left > .media-image-collage-2,
	.media-image-collage-right > .media-image-collage-1 {
		grid-column: 2 / span 2;
		}
	.media-image-collage-bottom > .media-image-collage-1,
	.media-image-collage-top > .media-image-collage-2 {
		z-index: 1;
		}
	.media-image-collage-bottom > .media-image-collage-2,
	.media-image-collage-top > .media-image-collage-1 {
		z-index: 2;
		}
	.media-image-collage-highlight {
		border-radius: var(--mywp-radius);
		font-size: var(--mywp-ts-text-sub-1);
		min-width: 13rem;
		max-width: 15rem;
		padding: 2rem;
		position: absolute;
		text-align: center;
		z-index: 10;
		}
	.media-image-collage-highlight-normal.media-image-collage-highlight-right,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-center,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-min.media-image-collage-highlight-left,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-max.media-image-collage-highlight-left {
		transform: translate(-50%, -50%);
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-h-center.media-image-collage-highlight-bottom,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-min.media-image-collage-highlight-left.media-image-collage-highlight-bottom,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-max.media-image-collage-highlight-left.media-image-collage-highlight-bottom,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-center.media-image-collage-highlight-center,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-min.media-image-collage-highlight-left.media-image-collage-highlight-center,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-max.media-image-collage-highlight-left.media-image-collage-highlight-center {
		transform: translate(-50%, 50%);
		}
	.media-image-collage-highlight-normal.media-image-collage-highlight-left,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-min.media-image-collage-highlight-right,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-max.media-image-collage-highlight-right {
		transform: translate(50%, -50%);
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-h-min.media-image-collage-highlight-right.media-image-collage-highlight-bottom,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-max.media-image-collage-highlight-right.media-image-collage-highlight-bottom,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-min.media-image-collage-highlight-right.media-image-collage-highlight-center,
	.media-image-collage-highlight-short.media-image-collage-highlight-h-max.media-image-collage-highlight-right.media-image-collage-highlight-center {
		transform: translate(50%, 50%);
		}
	.media-image-collage-highlight-normal.media-image-collage-highlight-right {
		left: 0;
		}
	.media-image-collage-highlight-normal.media-image-collage-highlight-left {
		right: 0;
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-h-center {
		left: 50%;
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-h-min.media-image-collage-highlight-left {
		left: 60%;
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-h-min.media-image-collage-highlight-right {
		right: 60%;
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-h-max.media-image-collage-highlight-left {
		left: 14%;
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-h-max.media-image-collage-highlight-right {
		right: 14%;
		}
	.media-image-collage-highlight-normal.media-image-collage-highlight-v-top,
	.media-image-collage-highlight-normal.media-image-collage-highlight-v-min,
	.media-image-collage-highlight-normal.media-image-collage-highlight-v-center,
	.media-image-collage-highlight-normal.media-image-collage-highlight-v-max,
	.media-image-collage-highlight-normal.media-image-collage-highlight-v-bottom {
		top: 50%;
		}
	.media-image-collage-highlight-normal.media-image-collage-highlight-v-top.media-image-collage-highlight-shift,
	.media-image-collage-highlight-normal.media-image-collage-highlight-v-min.media-image-collage-highlight-shift {
		top: 35%;
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-v-top,
	.media-image-collage-highlight-short.media-image-collage-highlight-v-min,
	.media-image-collage-highlight-short.media-image-collage-highlight-v-center {
		bottom: 0;
		}
	.media-image-collage-highlight-short.media-image-collage-highlight-v-max,
	.media-image-collage-highlight-short.media-image-collage-highlight-v-bottom {
		top: 0;
		}
	.media-image-collage-image {
		grid-row: 1 / span 1;
		position: relative;
		}
	.media-image-collage-img {
		border-radius: var(--mywp-radius);
		}
	.media-image-collage-highlight > strong,
	.media-image-collage-highlight > span {
		display: block;
		}
	.media-image-collage-highlight > strong {
		font-size: 2em;
		font-weight: var(--mywp-heavy);
		line-height: 1em;
		margin-bottom: 0.5rem;
		}
	.media-image-collage-highlight > span {
		line-height: 1.2em;
		}
	@media (min-width: 100em) {
		.boxes-item .media-image-collage.media-image-collage-extend {
			width: calc(100% + 10rem);
			}
		.boxes-item.boxes-left .media-image-collage.media-image-collage-extend {
			transform: translateX(-10rem);
			}
	}