Use responsive friendly grid layout

[knowler]

I noticed that on mobile the content horizontally overflows off both sized the screen in a way that makes it impossible to read the content on the left edge. This is a symptom of using inline centring inside of a grid that has no track sizes — a footgun of CSS grid.

This PR uses a grid with three columns:

• The first and last columns are the gutters. They replace the inline padding and they centre the content. They have a minimum of 2rem (--size-7), but then equally expand to fill the rest of the available space, effectively centring the content.
• The middle column, named content, is for the content. Both the <main> and <footer> elements are assigned to this column. It has a track size with a maximum of 80 characters which I took from the paragraph styles (--size-content-3). When 80 characters is greater than 100% of the grid’s inline size minus the gutters, it’ll use that value instead.

I also removed the UA margin on the body and adjusted the minimum inline size of the code snippets to avoid overflow.

Before

After