fix: feed layout style

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

@@ -1,28 +1,26 @@
 
-import React from 'react'
 import { MOCK_DATA } from 'src/mocks/data'
 import PostsList from '../../Components/PostsList/PostsList'
 import TrendingCard from '../../Components/TrendingCard/TrendingCard'
 import PopularCategories from './PopularCategories/PopularCategories'
 import SortBy from './SortBy/SortBy'
+import styles from './styles.module.css'
 
 export default function FeedPage() {
     return (
         <div
-            className='page-container grid w-full gap-32'
-            style={{
-                gridTemplateColumns: "326px 1fr 326px"
-            }}
+            className={`page-container grid w-full gap-32 ${styles.grid}`}
+
         >
-            <div>
+            <aside>
                 <SortBy />
                 <hr className="my-24 bg-gray-100" />
                 <PopularCategories />
-            </div>
+            </aside>
             <PostsList posts={MOCK_DATA['feed']} />
-            <div>
+            <aside>
                 <TrendingCard />
-            </div>
+            </aside>
         </div>
     )
 }

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

@@ -0,0 +1,13 @@
+.grid{
+    grid-template-columns: 1fr 2fr 1fr;
+}
+
+@media screen and (max-width:680px) {
+    aside{
+        display: none;
+    }
+
+    .grid{
+        grid-template-columns: 1fr;
+    }
+}