*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

.grid-container,
.site-grid,
.machen-container {
	width: min(100% - (2 * var(--machen-gutter)), var(--machen-container-max));
	max-width: var(--machen-container-max);
	margin-inline: auto;
}

.machen-section {
	padding-block: var(--machen-section-space);
}

.machen-stack {
	display: flex;
	flex-direction: column;
	gap: var(--machen-space-4);
}

.machen-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--machen-space-3);
	align-items: center;
}

@media (max-width: 767px) {
	:root {
		--machen-gutter: var(--machen-gutter-mobile);
		--machen-section-space: 4rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--machen-gutter: 32px;
	}
}

/*
 * Global #machen section system.
 * Backgrounds span the viewport; only the inner content is constrained.
 */
.machen-section--full-bleed,
.machen-full-bleed {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.machen-section--full-bleed > .machen-container,
.machen-section--full-bleed > .machen-section__inner,
.machen-full-bleed > .machen-container,
.machen-full-bleed > .machen-section__inner {
	width: min(100% - (2 * var(--machen-gutter)), var(--machen-container-max));
	max-width: var(--machen-container-max);
	margin-inline: auto;
}