Wrapper
The wrapper centres the content on the page, restricting it to a maximum width and providing a consistent central column.
The maximum width of the container is defined by the CSS custom property --wrapper-max-width. The wrapper has no padding of its own. If the --wrapper-max-width is smaller than the viewport, the --wrapper-padding will be subtracted from the wrapper width.
This should be used in all contexts where the content needs to be in the center of the page.
The content grid should be used for more complex layouts.