/* ==================================================

	Container

	@related stacking_order

================================================== */

.container {
	position: relative;
	width: 100%;
	max-width: var(--container-w);
	margin-inline: auto;
	padding-inline: var(--gutter-page);
}

/* =desktop breakpoint */
@media ( min-width: 1077px ) {

	.container {
		padding-inline: 0;
	}

}

/* =mobile */
@media ( max-width: 1076px ) {

	.container {
		/* min(): below the design width the column is the viewport, not a sideways scroll */
		min-width: min(100%, var(--mobile-col-w));
		padding-inline: 0;
	}

}