chore: move Main grid to its children

This way I can use full width background for some blocks.

1 files changed, 12 insertions, 9 deletions

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 2a58571..79b8631 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -12,6 +12,7 @@ import useSWRInfinite from 'swr/infinite';
 import { Button } from '@components/Buttons';
 import { getPublishedPosts } from '@services/graphql/queries';
 import PostHeader from '@components/PostHeader/PostHeader';
+import styles from '@styles/pages/Listing.module.scss';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const getKey = (pageIndex: number, previousData: PostsListData) => {
@@ -47,15 +48,17 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
         <title>{seo.blog.title}</title>
         <meta name="description" content={seo.blog.description} />
       </Head>
-      <PostHeader title={t`Blog`} />
-      <PostsList data={data} showYears={true} />
-      {hasNextPage && (
-        <Button
-          isDisabled={isLoadingMore}
-          clickHandler={() => setSize(size + 1)}
-          position="center"
-        >{t`Load more?`}</Button>
-      )}
+      <div className={styles.wrapper}>
+        <PostHeader title={t`Blog`} />
+        <PostsList data={data} showYears={true} />
+        {hasNextPage && (
+          <Button
+            isDisabled={isLoadingMore}
+            clickHandler={() => setSize(size + 1)}
+            position="center"
+          >{t`Load more?`}</Button>
+        )}
+      </div>
     </>
   );
 };