style: fix hackathons/feed grid

src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx

@@ -55,11 +55,11 @@ export default function HackathonsPage() {
                         </Button>
                     </div>
                 </aside>
-                <div className="self-start">
+                <main className="self-start">
                     <HackathonsList
                         isLoading={hackathonsQuery.loading}
                         items={hackathonsQuery.data?.getAllHackathons} />
-                </div>
+                </main>
             </div></>
     )
 }

src/features/Hackathons/pages/HackathonsPage/styles.module.scss

@@ -4,7 +4,10 @@
   gap: 24px;
 
   @media screen and (min-width: 768px) {
-    grid-template-columns: 1fr 3fr;
+    grid-template-columns: repeat(4, 1fr);
     gap: 24px;
+    > main {
+      grid-column: 2/5;
+    }
   }
 }

src/features/Posts/pages/FeedPage/FeedPage.tsx

@@ -57,13 +57,15 @@ export default function FeedPage() {
                         />
                     </div>
                 </aside>
-                <PostsList
-                    isLoading={feedQuery.loading}
-                    items={feedQuery.data?.getFeed}
-                    isFetching={isFetchingMore}
-                    onReachedBottom={fetchMore}
-                />
-                <aside className='no-scrollbar hidden md:block'>
+                <main>
+                    <PostsList
+                        isLoading={feedQuery.loading}
+                        items={feedQuery.data?.getFeed}
+                        isFetching={isFetchingMore}
+                        onReachedBottom={fetchMore}
+                    />
+                </main>
+                <aside className='no-scrollbar'>
                     <div className="sticky"
                         style={{
                             top: `${navHeight + 16}px`,

src/features/Posts/pages/FeedPage/styles.module.scss

@@ -2,13 +2,31 @@
   display: grid;
   grid-template-columns: 100%;
   gap: 24px;
+  > aside:last-of-type {
+    display: none;
+  }
 
   @media screen and (min-width: 768px) {
-    grid-template-columns: 1fr 3fr 0;
-    gap: 24px;
+    grid-template-columns: repeat(4, 1fr);
+
+    > aside:first-of-type {
+      grid-column: 1/2;
+    }
+    > main {
+      grid-column: 2/-1;
+    }
   }
 
   @media screen and (min-width: 1024px) {
-    grid-template-columns: 1fr 2fr 1fr;
+    > aside:first-of-type {
+      grid-column: 1/2;
+    }
+    > main {
+      grid-column: 2/-2;
+    }
+    > aside:last-of-type {
+      display: block;
+      grid-column: -1/-2;
+    }
   }
 }