.wrapper {
	/* CLASSIC WRAPPER */
	/* max-width: var(--wrapper-max-width, 80rem);
	margin-inline-start: auto;
	margin-inline-end: auto;
	--_content-padding: var(--content-padding, var(--space-s));
	padding-inline-start: var(--_content-padding);
	padding-inline-end: var(--_content-padding);
	position: relative; */
	--content-width: 65rem;
	--grid-wrapper: [full-start] 1fr [wrapper-start]
		minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];

	/* GRID WRAPPER */
	display: grid;
	grid-template-columns: var(--grid-wrapper);
	--_content-padding: var(--content-padding, var(--space-s));
	column-gap: var(--_content-padding);
}
/* set content inside wrapper column */
.wrapper > * {
	grid-column: wrapper;
}

/* set full width content to full grid */
.wrapper.full-width {
	/* calculate inline padding based on available space minus content space to align full-width content with wrapper content */
	padding-inline: max(
		calc((100vw - var(--content-width)) / 2),
		var(--_content-padding)
	);
	grid-column: full;
}
/* set full width color to full grid */
.wrapper.full-width-color {
	/* https://codepen.io/t_afif/pen/oNEaqQX */
	border-image: conic-gradient(var(--color-full-width, var(--color-light)) 0 0)
		fill 0 //0 100vw;;
}