Update mobile layout in articles

pages/articles/index.vue

@@ -16,23 +16,29 @@ const articles = useAsyncData("articles", async () => {
   </UContainer>
 
   <UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8">
-    <UCard class="col-span-6" v-for="article in articles.data.value">
-      <div class="grid gap-4">
+    <UCard
+      class="col-span-12 md:col-span-6"
+      :ui="{ body: { padding: '' } }"
+      v-for="article in articles.data.value"
+    >
+      <div class="grid gap-4 pb-4 md:pb-6">
         <NuxtImg
-          class="rounded rounded-lg cursor-pointer"
+          class="rounded-t-lg cursor-pointer"
           :src="article.coverImage.url"
           @click="navigateTo(article.path)"
         />
-        <div class="w-full">
-          <NuxtLink :to="article.path" class="font-semibold">{{
-            article.title
-          }}</NuxtLink>
+        <div class="w-full px-4 md:px-6">
+          <NuxtLink
+            :to="article.path"
+            class="font-semibold line-clamp-2 min-h-12"
+            >{{ article.title }}</NuxtLink
+          >
           <div class="text-sm text-slate-500">
             {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
           </div>
         </div>
 
-        <div>
+        <div class="w-full px-4 md:px-6">
           <UButton variant="soft" color="gray" :to="article.path"
             >Read article</UButton
           >