$layout-gutter-sizes: "none", "small", "medium", "large", "huge";

@mixin layout-grid-variables() {
	--layout-grid--gutter-none: 0px;
	--layout-grid--gutter-small: calc( var(--global--spacing-unit) / 2); // 8px
	--layout-grid--gutter-medium: var(--global--spacing-unit);           // 16px
	--layout-grid--gutter-large: calc( var(--global--spacing-unit) * 2); // 32px
	--layout-grid--gutter-huge: calc( var(--global--spacing-unit) * 3);  // 48px
	--layout-grid--background-offset: var(--global--spacing-unit);       // 16px
}