@charset "utf-8";

/* BOX MEDIA */
.boxmedia {
	--boxmedia-larger: 62.5%;
	--boxmedia-padding: var(--section-padding);
	--boxmedia-content-padding: var(--margin-block);
	--boxmedia-media-padding: var(--margin-block);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	}
.boxmedia-stacked,
.boxmedia.boxmedia-item-margin-add {
	gap: var(--margin-block);
	}
.boxmedia-stacked {
	margin-inline: auto;
	max-width: var(--width-slim);
	}
.boxmedia-stacked .boxmedia-item {
	gap: var(--margin-gap);
	}

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

/* ITEM */
.boxmedia-item {
	display: grid;
	}

/* HOLDER */
.boxmedia-holder {
	min-width: 0;
	width: 100%;
	}

/* CUSTOM */
.boxmedia-left .boxmedia-item > .boxmedia-image .shift-expanded,
.boxmedia-right .boxmedia-item > .boxmedia-info .shift-expanded,
.boxmedia-alternate-left .boxmedia-item:nth-child(odd) > .boxmedia-image .shift-expanded,
.boxmedia-alternate-left .boxmedia-item:nth-child(even) > .boxmedia-info .shift-expanded,
.boxmedia-alternate-right .boxmedia-item:nth-child(odd) > .boxmedia-info .shift-expanded,
.boxmedia-alternate-right .boxmedia-item:nth-child(even) > .boxmedia-image .shift-expanded {
	--expand-direction: -1;
	}
.boxmedia-item.boxmedia-width-full .shift-expanded {
	--expand-x: 1;
	}

/* ADJUSTMENTS */
@media (max-width: 59.99em) {
	.boxmedia-media-full .boxmedia-image {
		margin-inline: calc(var(--section-padding) * -1);
		}
	.boxmedia-item {
		gap: var(--margin-gap);
		}
}
@media (min-width: 60em) {
	.boxmedia-not-stacked .boxmedia-item {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	.boxmedia-right .boxmedia-sizing-content,
	.boxmedia-alternate-left .boxmedia-sizing-content:nth-child(even),
	.boxmedia-alternate-right .boxmedia-sizing-content:nth-child(odd),
	.boxmedia-left .boxmedia-sizing-media,
	.boxmedia-alternate-left .boxmedia-sizing-media:nth-child(odd),
	.boxmedia-alternate-right .boxmedia-sizing-media:nth-child(even) {
		grid-template-columns: var(--boxmedia-larger) minmax(0, 1fr);
		}
	.boxmedia-left .boxmedia-sizing-content,
	.boxmedia-alternate-left .boxmedia-sizing-content:nth-child(odd),
	.boxmedia-alternate-right .boxmedia-sizing-content:nth-child(even),
	.boxmedia-right .boxmedia-sizing-media,
	.boxmedia-alternate-left .boxmedia-sizing-media:nth-child(even),
	.boxmedia-alternate-right .boxmedia-sizing-media:nth-child(odd) {
		grid-template-columns: minmax(0, 1fr) var(--boxmedia-larger);
		}
	
	/* FORCED WIDTHS */
	.boxmedia-width-full.boxmedia-media-full {
		--boxmedia-padding: 0rem;
		}
	.boxmedia-width-full .boxmedia-info > .boxmedia-holder {
		max-width: 40rem;
		}
	
	/* FULL */
	.boxmedia-right .boxmedia-item.boxmedia-width-full > .boxmedia-info,
	.boxmedia-alternate-left .boxmedia-item.boxmedia-width-full:nth-child(even) > .boxmedia-info,
	.boxmedia-alternate-right .boxmedia-item.boxmedia-width-full:nth-child(odd) > .boxmedia-info {
		display: flex;
		justify-content: flex-end;
		}
	.boxmedia-right .boxmedia-item.boxmedia-width-full.boxmedia-media-full > .boxmedia-info,
	.boxmedia-alternate-left .boxmedia-item.boxmedia-width-full.boxmedia-media-full:nth-child(even) > .boxmedia-info,
	.boxmedia-alternate-right .boxmedia-item.boxmedia-width-full.boxmedia-media-full:nth-child(odd) > .boxmedia-info {
		padding-left: var(--margin-pad);
		}
	.boxmedia-left .boxmedia-item.boxmedia-width-full.boxmedia-media-full > .boxmedia-info,
	.boxmedia-alternate-left .boxmedia-item.boxmedia-width-full.boxmedia-media-full:nth-child(odd) > .boxmedia-info,
	.boxmedia-alternate-right .boxmedia-item.boxmedia-width-full.boxmedia-media-full:nth-child(even) > .boxmedia-info {
		padding-right: var(--margin-pad);
		}
	
	/* VERTICAL */
	.boxmedia-item.boxmedia-vertical-top {
		align-items: flex-start;
		}
	.boxmedia-item.boxmedia-vertical-top .container-alt:first-child > .header:first-child {
		padding-top: var(--margin-block);
		}
	.boxmedia-item.boxmedia-vertical-middle {
		align-items: center;
		}
	.boxmedia-item.boxmedia-vertical-bottom {
		align-items: flex-end;
		}
	
	/* POSITIONING */
	.boxmedia-left .boxmedia-item > .boxmedia-image,
	.boxmedia-right .boxmedia-item > .boxmedia-info,
	.boxmedia-alternate-left .boxmedia-item:nth-child(odd) > .boxmedia-image,
	.boxmedia-alternate-left .boxmedia-item:nth-child(even) > .boxmedia-info,
	.boxmedia-alternate-right .boxmedia-item:nth-child(odd) > .boxmedia-info,
	.boxmedia-alternate-right .boxmedia-item:nth-child(even) > .boxmedia-image {
		order: 1;
		}
	.boxmedia-left .boxmedia-item > .boxmedia-info,
	.boxmedia-right .boxmedia-item > .boxmedia-image,
	.boxmedia-alternate-left .boxmedia-item:nth-child(odd) > .boxmedia-info,
	.boxmedia-alternate-left .boxmedia-item:nth-child(even) > .boxmedia-image,
	.boxmedia-alternate-right .boxmedia-item:nth-child(odd) > .boxmedia-image,
	.boxmedia-alternate-right .boxmedia-item:nth-child(even) > .boxmedia-info {
		order: 2;
		}
	
	/* SPACING */
	.boxmedia-right .boxmedia-item > .boxmedia-image > .boxmedia-holder,
	.boxmedia-alternate-left .boxmedia-item:nth-child(even) > .boxmedia-image > .boxmedia-holder,
	.boxmedia-alternate-right .boxmedia-item:nth-child(odd) > .boxmedia-image > .boxmedia-holder {
		padding-left: var(--boxmedia-media-padding);
		}
	.boxmedia-left .boxmedia-item > .boxmedia-image > .boxmedia-holder,
	.boxmedia-alternate-right .boxmedia-item:nth-child(even) > .boxmedia-image > .boxmedia-holder,
	.boxmedia-alternate-left .boxmedia-item:nth-child(odd) > .boxmedia-image > .boxmedia-holder {
		padding-right: var(--boxmedia-media-padding);
		}
	.boxmedia-right .boxmedia-item > .boxmedia-info > .boxmedia-holder,
	.boxmedia-alternate-left .boxmedia-item:nth-child(even) > .boxmedia-info > .boxmedia-holder,
	.boxmedia-alternate-right .boxmedia-item:nth-child(odd) > .boxmedia-info > .boxmedia-holder {
		padding-right: var(--boxmedia-content-padding);
		}
	.boxmedia-left .boxmedia-item > .boxmedia-info > .boxmedia-holder,
	.boxmedia-alternate-right .boxmedia-item:nth-child(even) > .boxmedia-info > .boxmedia-holder,
	.boxmedia-alternate-left .boxmedia-item:nth-child(odd) > .boxmedia-info > .boxmedia-holder {
		padding-left: var(--boxmedia-content-padding);
		}
	
	/* OVERLAP */
	.boxmedia-alternate-left.boxmedia-item-margin-overlap .boxmedia-item:nth-child(odd) > .boxmedia-info > .boxmedia-holder,
	.boxmedia-alternate-right.boxmedia-item-margin-overlap .boxmedia-item:nth-child(odd) > .boxmedia-info > .boxmedia-holder {
		padding-bottom: calc(var(--margin-normal) + var(--margin-block));
		}
	.boxmedia-alternate-left.boxmedia-item-margin-overlap .boxmedia-item:nth-child(even) > .boxmedia-info > .boxmedia-holder,
	.boxmedia-alternate-right.boxmedia-item-margin-overlap .boxmedia-item:nth-child(even) > .boxmedia-info > .boxmedia-holder {
		padding-top: var(--margin-block);
		}
	.boxmedia-alternate-left.boxmedia-item-margin-overlap .boxmedia-item:nth-child(even) > .boxmedia-image > .boxmedia-holder,
	.boxmedia-alternate-right.boxmedia-item-margin-overlap .boxmedia-item:nth-child(even) > .boxmedia-image > .boxmedia-holder {
		margin-top: calc(var(--margin-normal) * -1);
		}
	.boxmedia-alternate-left.boxmedia-item-margin-overlap .boxmedia-item:nth-child(odd):not(:first-child),
	.boxmedia-alternate-right.boxmedia-item-margin-overlap .boxmedia-item:nth-child(odd):not(:first-child) {
		padding-top: var(--margin-pad);
		}
	
	/* STICKY */
	.boxmedia-item.boxmedia-sticky .boxmedia-container {
		position: sticky;
		top: var(--sticky-top);
		transition: top var(--animation-duration) var(--animation-easing);
		}
}