Update grid behavior

[gfellerph]

Synchronize the grid implementation with the Design. See the grid analysis issue for details and the history of the discussion.

Design: https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?t=S9MdGWrTM9E4Kyob-0

Gutter width comparison

Viewport	Design	Implementation1
XXS (<400)	Gutter: 12 Margin: 12	Gutter: 30 Margin: 12
XS (400-600)	Gutter: 12 Margin: 16	Gutter: 30 Margin: 16
S (600-800)	Gutter: 16 Margin: 32	Gutter: 30 Margin: 32
M (800-1024)	Gutter: 16 Margin: 32	Gutter: 30 Margin: 32
L (1024-1280)	Gutter: 16 Margin: 40	Gutter: 30 Margin: 40
XL (>1280)	Gutter: 16 Margin: 0 Fixed column width of 84	Gutter: 30 Margin: 128 Container max width: 1440

Tasks

Preview Give feedback

1. Make gutter widths responsive and update values
2. Update container paddings
3. Add and adjust container max-width
4. Deprecate grid-system rg breakpoint #2096
   pibs 📦 styles +2

[gfellerph]

Discuss with Design again, when going from 1023 to 1024 content shrinks as well. Could we use vw padding?

[oliverschuerch]

As far as I know, every person included in the decision approved our intention, visualized here: https://design-system-grid-visualization.netlify.app/.
Source: https://github.com/swisspost/design-system-grid-visualization

@gfellerph Can we go on and work on this issue?

[oliverschuerch]

Final adjunstments

Element	Property	XS	SM	RG	MD	LG	XL	XXL
.container	padding-inline	12px	16px	16px	32px	32px	40px	120px
.container-fluid	padding-inline	12px	16px	16px	32px	32px	32px	32px
.row / .col	gutter	12px	16px	16px	16px	16px	16px	16px