Fix mobile responsive design issue

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/blog/Header.vue

@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
     <NuxtImg
       :src="image || ''"
       :alt="alt || ''"
-      class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-3/6 md:w-4/5 content-center object-cover"
+      class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover"
     />
     <p class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600">
       {{ description }}

pages/blogs/[blog].vue

@@ -74,7 +74,7 @@ useHead({
 </script>
 
 <template>
-  <div class="px-6 container max-w-5xl mx-auto grid grid-cols-12 gap-x-12 ">
+  <div class="px-6 container max-w-5xl mx-auto sm:grid grid-cols-12 gap-x-12 ">
     <div class="col-span-12 lg:col-span-9">
       <BlogHeader
         :title="data.title"