.wrapper {
	$this: &;

	--wrapper-grid-side-columns: calc(var(--global-grid-side-padding) - var(--global-grid-gutter));
	--wrapper-grid-template-columns: var(--wrapper-grid-side-columns) repeat(var(--global-main-content-width), minmax(0, 1fr)) var(--wrapper-grid-side-columns);

	display: var(--wrapper-display, grid);
	grid-template-columns: var(--wrapper-grid-template-columns);
	column-gap: var(--global-grid-gutter);

	margin-top: calc(var(--wrapper-spacing-top) * var(--base-font-size) * 0.1rem);
	margin-bottom: calc(var(--wrapper-spacing-bottom) * var(--base-font-size) * 0.1rem);

	padding-top: calc(var(--wrapper-spacing-top-in, 0) * var(--base-font-size) * 0.1rem);
	padding-bottom: calc(var(--wrapper-spacing-bottom-in, 0) * var(--base-font-size) * 0.1rem);

	padding-inline-start: calc(var(--wrapper-spacing-left-in, 0) * var(--base-font-size) * 0.1rem);
	padding-inline-end: calc(var(--wrapper-spacing-right-in, 0) * var(--base-font-size) * 0.1rem);

	margin-inline-start: calc(var(--wrapper-spacing-left, 0) * var(--base-font-size) * 0.1rem);
	margin-inline-end: calc(var(--wrapper-spacing-right, 0) * var(--base-font-size) * 0.1rem);

	background: var(--wrapper-bg-color-gradient, var(--wrapper-bg-color-project, transparent));

	border-top: var(--wrapper-divider-top);
	border-right: var(--wrapper-divider-right);
	border-bottom: var(--wrapper-divider-bottom);
	border-left: var(--wrapper-divider-left);

	border-radius: calc(var(--wrapper-rounded-corners, 0) * var(--base-font-size) * 0.1rem);

	overflow-x: var(--wrapper-overflow-x);
	overflow-y: var(--wrapper-overflow-y);

	&__anchor {
		margin-top: 0;
		height: 1px;
		opacity: 0;
		position: absolute;
		z-index: -1;
	}

	&__inner {
		grid-column: calc(var(--wrapper-offset) + var(--wrapper-start-offset, 0)) / span calc(var(--wrapper-width) + var(--wrapper-end-offset, 0));
	}
}