fix(blog): avoid overflow + double padding (#12508)

* fix(blog): set max-width only on large screens

Only set `max-width: 52rem` on larger screens, 
to avoid overflow on smaller screens.

* fix(blog): avoid adding padding twice

Previously, we were adding 1rem of horizontal
padding both on `<main>` and `<article>`.

Now, we only add it on the `<article>`,
to be consistent with content pages.

client/src/blog/post.scss

@@ -6,6 +6,7 @@
   grid-template-areas:
     "post"
     "newsletter";
+  padding: 0;
   width: 100%;
 
   @media (min-width: $screen-lg) {
@@ -81,7 +82,10 @@
 
   > .blog-post {
     grid-area: post;
-    max-width: 52rem;
+
+    @media (min-width: $screen-lg) {
+      max-width: 52rem;
+    }
 
     + .section-newsletter h2 {
       font: var(--type-heading-h3);