.wrapper {
	--wrapper-padding-inline: var(--space-px-4);
	--wrapper-content-max-width: calc(1440px - var(--wrapper-padding-inline) * 2);

	display: grid;
	grid-template-columns:
		[full-width-start] minmax(var(--wrapper-padding-inline), 1fr)
		[content-start] min(
			100% - (var(--wrapper-padding-inline) * 2),
			var(--wrapper-content-max-width)
		)
		[content-end]
		minmax(var(--wrapper-padding-inline), 1fr) [full-width-end];
	align-items: start;

	& > :not(.wrapper__full) {
		grid-column: content;
	}
}

.wrapper__full {
	display: grid;
	grid-column: full-width;
	grid-template-columns: subgrid;

	& > * {
		grid-column: content;
	}
}

@media (width >= 48em) {
	.wrapper {
		--wrapper-padding-inline: var(--space-px-8);
	}
}