[class*="layout-box"] {
	padding-block: calc(var(--box-scale-base-block) * var(--layout-box-scale));
	padding-inline: calc(var(--box-scale-base-inline) *	var(--layout-box-scale));
}

.layout-box\:0 { --layout-box-scale: 0; }
.layout-box\:1 { --layout-box-scale: 1; }
.layout-box\:2 { --layout-box-scale: 2; }

[class*="layout-flex"] {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	row-gap: calc(var(--box-scale-base-block) * var(--layout-flex-gap-scale));
	column-gap: calc(var(--box-scale-base-inline) * var(--layout-flex-gap-scale));
}

.layout-flex\:0 { --layout-flex-gap-scale: 0; }
.layout-flex\:1 { --layout-flex-gap-scale: 1; }
.layout-flex\:2 { --layout-flex-gap-scale: 2; }

[class*="layout-stack"] {
	display: flex;
	flex-direction: column;
}

[class*="layout-stack"] > * {
	margin-block: 0;
}

[class*="layout-stack"] > * + * {
	margin-block-start: calc(var(--box-scale-base-block) * var(--layout-stack-margin-scale));
}

.layout-stack\:0 > * + * { --layout-stack-margin-scale: 0; }
.layout-stack\:1 > * + * { --layout-stack-margin-scale: 1; }
.layout-stack\:2 > * + * { --layout-stack-margin-scale: 2; }

.margin-inline\:auto { margin-inline: auto; }

.padding-right\:safe-area { padding-right: env(safe-area-inset-right); }
.padding-left\:safe-area { padding-left: env(safe-area-inset-left); }

.max-inline-size\:accessible { max-inline-size: var(--box-sizing-accessible); }
.max-inline-size\:readable { max-inline-size: var(--box-sizing-readable); }
.max-inline-size\:touchable { max-inline-size: var(--box-sizing-touchable); }
.max-inline-size\:focusable { max-inline-size: var(--box-sizing-focusable); }

.aspect-ratio\:1\/1 { aspect-ratio: 1 / 1; }
.aspect-ratio\:5\/7 { aspect-ratio: 5 / 7; }
.aspect-ratio\:7\/5 { aspect-ratio: 7 / 5; }

.object-position\:left { object-position: left; }
.object-position\:center { object-position: center; }
.object-position\:right { object-position: right; }
.object-position\:top { object-position: top; }
.object-position\:bottom { object-position: bottom; }