Start making new post card

web/src/components/postList/postCard.astro

@@ -6,13 +6,24 @@ const pb = await authPB()
 const { p } = Astro.props
 ---
 
-<div class="mb-5 w-2/3">
-    <time datetime={p['publishDate']} class=" text-gray-500">{getFormattedDate(p['publishDate'])}</time>
-    <div>
-        <a href={`/posts/${p['slug']}/`} rel="prefetch">
-            <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-xl border-12 border-white"/>
-            {p['title']}
+<div class="mb-8 flex flex-col md:flex-row gap-4 md:gap-3">
+    <!-- Text content on left -->
+    <div class="flex-1  flex flex-col justify-start order-2 md:order-1">
+        
+        <time datetime={p.publishDate} class="text-sm text-gray-500">{getFormattedDate(p.publishDate)}</time>
+        <a href={`/posts/${p.slug}/`} rel="prefetch" class="no-underline hover:underline">
+            <h2 class="text-2xl font-bold ">{p.title}</h2>
+        </a>
+        {
+            p.description !== "" &&
+            <q class="line-clamp-3 block italic text-gray-700">{p['description']}</q>
+        }
+    </div>
+    
+    <!-- Image on right -->
+    <div class="md:w-80 order-1 md:order-2">
+        <a href={`/posts/${p.slug}/`} rel="prefetch">
+            <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-sm w-full h-48 md:h-full object-cover" alt={p['title']}/>
         </a>
     </div>
-    <q class="line-clamp-3 block italic">{p['description']}</q>
 </div>