@charset "utf-8";

/* BOXES */
.boxes {
	--boxes-gap: var(--margin-block);
	--boxes-larger: 62.5%;
	--boxes-offset: 4rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
	width: 100%;
	}
.boxes.frame.frame-block {
	overflow: hidden;
	}

/* FORCED WIDTHS */
.boxes-width-narrow {
	--box-width: var(--width-narrow);
	}
.boxes-width-content {
	--box-width: var(--width-content);
	}
.boxes-width-wider {
	--box-width: var(--width-wider);
	}
.boxes-width-content,
.boxes-width-narrow,
.boxes-width-wider {
	--box-max-width: calc(var(--viewport-width) - (2 * var(--section-padding)));
	max-width: var(--box-width);
	width: min(var(--box-width), var(--box-max-width));
	margin-inline: calc((100% - min(var(--box-width), var(--box-max-width))) / 2);
	}

/* COLUMNS */
.boxes-columns {
	gap: var(--margin-normal);
	position: relative;
	}
.boxes-columns.boxes-columns-border {
	--border-width: 2px;
	gap: calc(var(--margin-normal) * 2);
	}

/* SEPARATE */
.boxes.boxes-separate,
.boxes-together.boxes-different.boxes-flat-one {
	gap: var(--boxes-gap);
	}

/* ITEM */
.boxes-item {
	display: grid;
	position: relative;
	}
.boxes-top-left > .boxes-right,
.boxes-top-right > .boxes-left {
	z-index: 1;
	}
.boxes-top-left > .boxes-left,
.boxes-top-right > .boxes-right {
	z-index: 2;
	}

/* HOLDER - CONTAINER */
.boxes-holder,
.boxes-container {
	min-width: 0;
	width: 100%;
	}

/* STRETCH */
.boxes-item.boxes-item-fit .fill-adjust-item,
.boxes-item.boxes-item-fit .fill-adjust-item * {
	box-shadow: none;
	}

/* CUSTOM */
.boxes-map .map {
	border: none;
	height: 100%;
	min-height: calc(100vh / 3);
	}
.boxes-left .shift-expanded {
	--expand-direction: -1;
	}

/* ADJUSTMENTS */
@media (max-width: 59.99em) {
	/* BOXES */
	.boxes-together.boxes-full-mobile.boxes-solid,
	.boxes-together.boxes-full-mobile.boxes-solid-no .boxes-item.background-paint,
	.boxes-together.boxes-full-mobile.boxes-solid-no .boxes-item.has-design {
		margin-inline: calc(var(--section-padding) * -1);
		}
	
	/* COLUMNS */
	.boxes-columns.boxes-columns-border.boxes-second-auto > .boxes-left::before,
	.boxes-columns.boxes-columns-border.boxes-second-first > .boxes-right::before {
		background-color: var(--background-divider);
		bottom: calc( ( var(--margin-normal) * -1 ) + ( var(--border-width) / -2 ) );
		content: '';
		height: var(--border-width);
		position: absolute;
		width: 100%;
		}
	
	/* ITEM */
	.boxes.boxes-second-first .boxes-right {
		grid-row: 1;
		}

	/* HOLDER */
	.boxes-together.boxes-same.boxes-second-auto > .boxes-left > .boxes-container > .boxes-holder.mgv.mgv-default,
	.boxes-together.boxes-same.boxes-second-first > .boxes-right > .boxes-container > .boxes-holder.mgv.mgv-default {
		margin-bottom: calc(var(--margin-normal) / 2);
		}
	.boxes-together.boxes-same.boxes-second-auto > .boxes-right > .boxes-container > .boxes-holder.mgv.mgv-default,
	.boxes-together.boxes-same.boxes-second-first > .boxes-left > .boxes-container > .boxes-holder.mgv.mgv-default {
		margin-top: calc(var(--margin-normal) / 2);
		}
}
@media (min-width: 60em) {
	/* BOXES */
	.boxes {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		}
	.boxes-larger-left {
		grid-template-columns: var(--boxes-larger) minmax(0, 1fr);
		}
	.boxes-larger-right {
		grid-template-columns: minmax(0, 1fr) var(--boxes-larger);
		}
	.boxes-larger-left.boxes-full {
		grid-template-columns: minmax(0, 1fr) 20rem;
		}
	.boxes-larger-right.boxes-full {
		grid-template-columns: calc( (80rem * 0.25) + ((100vw - 80rem) * 0.5) ) minmax(0, 1fr);
		}
	.boxes-columns.boxes-vertical-top,
	.boxes-shifted.boxes-vertical-top {
		align-items: flex-start;
		}
	.boxes-columns.boxes-vertical-middle,
	.boxes-shifted.boxes-vertical-middle {
		align-items: center;
		}
	.boxes-columns.boxes-vertical-bottom,
	.boxes-shifted.boxes-vertical-bottom {
		align-items: flex-end;
		}
	.boxes-shift.boxes-shift-up.boxes-top-left > .boxes-left,
	.boxes-shift.boxes-shift-up.boxes-top-right > .boxes-right {
		transform: translate(0, calc(var(--margin-normal) * -1));
		}
	
	/* COLUMNS */
	.boxes-columns.boxes-columns-border::before {
		background-color: var(--background-divider);
		content: '';
		left: calc(50% - ( var(--border-width) / 2 ));
		height: 100%;
		position: absolute;
		width: var(--border-width);
		}
	.boxes-columns.boxes-columns-border.boxes-larger-right::before {
		left: calc((100% - var(--boxes-larger)) - ( var(--border-width) / 2 ) - var(--margin-normal));
		}
	.boxes-columns.boxes-columns-border.boxes-larger-left::before {
		left: calc(var(--boxes-larger) - ( var(--border-width) / 2 ) + var(--margin-normal));
		}
	
	/* OFFSET */
	.boxes-offset {
		grid-template-columns: minmax(0, 1fr) var(--boxes-offset) var(--boxes-offset) minmax(0, 1fr);
		grid-template-rows: var(--boxes-offset) minmax(0, 1fr) var(--boxes-offset);
		}
	.boxes.boxes-offset.boxes-larger-left {
		grid-template-columns: calc(var(--boxes-larger) - var(--boxes-offset)) var(--boxes-offset) var(--boxes-offset) minmax(0, 1fr);
		}
	.boxes.boxes-offset.boxes-larger-right {
		grid-template-columns: minmax(0, 1fr) var(--boxes-offset) var(--boxes-offset) calc(var(--boxes-larger) - var(--boxes-offset));
		}
	.boxes-offset.boxes-top-left .boxes-left {
		grid-area: 1 / 1 / span 2 / span 2;
		}
	.boxes-offset.boxes-top-left .boxes-right {
		grid-area: 2 / 2 / span 2 / span 3;
		}
	.boxes-offset.boxes-top-right .boxes-left {
		grid-area: 2 / 1 / span 2 / span 3;
		}
	.boxes-offset.boxes-top-right .boxes-right {
		grid-area: 1 / 3 / span 2 / span 2;
		}
	.boxes-offset.boxes-top-left .boxes-right.background-paint > .boxes-container,
	.boxes-offset.boxes-top-left .boxes-right.design-here > .boxes-container {
		padding-left: calc(var(--boxes-offset) / 2);
		}
	.boxes-offset.boxes-top-right .boxes-left.background-paint > .boxes-container,
	.boxes-offset.boxes-top-right .boxes-left.design-here > .boxes-container {
		padding-right: calc(var(--boxes-offset) / 2);
		}
	
	/* STICKY */
	.boxes-sticky.boxes-columns .boxes-item,
	.boxes-sticky .boxes-container {
		position: sticky;
		top: var(--sticky-top);
		transition: top var(--animation-duration) var(--animation-easing);
		}
	
	/* ITEM */
	.boxes-vertical-middle > .boxes-item {
		align-items: center;
		}
	.boxes-vertical-bottom > .boxes-item {
		align-items: flex-end;
		}
	
	/* HOLDER */
	.boxes-together.boxes-same > .boxes-left > .boxes-container > .boxes-holder.mgs.mgs-default {
		padding-right: calc(var(--margin-normal) / 2);
		}
	.boxes-together.boxes-same > .boxes-right > .boxes-container > .boxes-holder.mgs.mgs-default {
		padding-left: calc(var(--margin-normal) / 2);
		}
	
	/* FULL */
	.boxes-full.boxes-together > .boxes-has-limit.boxes-left {
		padding-left: var(--margin-pad);
		justify-items: flex-end;
		}
	.boxes-full.boxes-together > .boxes-has-limit.boxes-right {
		padding-right: var(--margin-pad);
		}
	.boxes-full.boxes-together > .boxes-has-limit.boxes-equal > .boxes-container {
		max-width: 40rem;
		}
	.boxes-full.boxes-together > .boxes-has-limit.boxes-larger > .boxes-container {
		max-width: 60rem;
		}
	.boxes-full.boxes-together > .boxes-has-limit.boxes-left.background-paint > .boxes-container > .mgs.mgs-default {
		padding-left: 0;
		}
	.boxes-full.boxes-together > .boxes-has-limit.boxes-right.background-paint > .boxes-container > .mgs.mgs-default {
		padding-right: 0;
		}
	
	/* STRETCH */
	.boxes-item.boxes-item-fit .fill-adjust-item {
		display: block;
		}
	.boxes-item.boxes-item-fit .fill-adjust-item,
	.boxes-item.boxes-item-fit .fill-adjust-item * {
		height: 100%;
		position: absolute;
		width: 100%;
		}
	.boxes-item.boxes-item-fit .fill-adjust-item * {
		object-fit: cover;
		}
	
	/* PULL */
	.boxes-pull-left,
	.boxes-pull-right,
	.boxes-pull-self {
		--pull-distance: var(--margin-normal);
		}
	.boxes-pull-less {
		--pull-distance: var(--margin-less);
		}
	.boxes-pull-more {
		--pull-distance: var(--margin-more);
		}
	.boxes-pull-huge {
		--pull-distance: var(--margin-huge);
		}
	.boxes-pull-mega {
		--pull-distance: var(--margin-mega);
		}
	.boxes-pull-left > .boxes-left > .boxes-container,
	.boxes-pull-right > .boxes-right > .boxes-container,
	.boxes-pull-self > .boxes-container {
		margin-top: calc(var(--pull-distance) * -1);
		}
}