fix: style components to add responsivity

components/Current/Blocks/List/ListItem.tsx

@@ -1,7 +1,9 @@
 import Link from "next/link"
 import { cva } from "class-variance-authority"
 import { BlockListItemsEnum } from "@/types/requests/blocks/list"
+
 import type { ListItem } from "@/types/requests/blocks/list"
+
 import styles from "./list.module.css"
 
 const config = {

components/Current/Blocks/List/list.module.css

@@ -6,7 +6,6 @@
     font-weight: 400;
     color: #483729;
     margin-bottom: 1rem;
-    margin-top: 2rem;
 }
 
 .ul {

components/Current/Blocks/blocks.module.css

@@ -0,0 +1,11 @@
+.wrapper {
+    background-color: #fff;
+    padding: 20px 10px 5px;
+}
+
+@media screen and (min-width: 740px) {
+    .wrapper {
+     padding:20px 0 0;
+    }
+  }
+  

components/Current/Blocks/index.tsx

@@ -0,0 +1,34 @@
+import List from "./List"
+import Puffs from "./Puffs"
+import Text from "./Text"
+
+import { BlocksTypenameEnum } from "@/types/requests/utils/typename"
+
+import styles from "./blocks.module.css"
+import type { BlocksProps } from "@/types/components/current/blocks"
+
+export default function Blocks({ blocks }: BlocksProps) {
+  if (!blocks?.length) {
+    return null
+  }
+
+  return (
+    <section className={styles.wrapper}>
+      {blocks.map((block) => {
+        const type = block.__typename
+        switch (type) {
+          case BlocksTypenameEnum.CurrentBlocksPageBlocksList:
+            return <List key={block.__typename} {...block} />
+          case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs:
+            return <Puffs key={block.__typename} {...block} />
+          case BlocksTypenameEnum.CurrentBlocksPageBlocksText:
+            return <Text key={block.__typename} {...block} />
+          default:
+            console.log(`Unknown type: (${type})`)
+            return null
+        }
+      })}
+      <div id="mainarea_personalized"></div>
+    </section>
+  )
+}