fix the cards design

components/Top-Level/blog-card/BlogCard.tsx

@@ -12,9 +12,9 @@ interface blogcardprops extends profileCardsItems{
 
 const BlogCard: React.FC<blogcardprops> = ({ img, title, description, id, ...props }) => {
   return (
-    <Link href={`/blog/${id}`}>
+    <Link href={`/blog/${id}`} className="sm:max-w-[28rem] w-full inline-block">
       <div
-        className="sm:min-w-sm w-full  shadow-md rounded-md cursor-pointer hover:shadow-xl  transition-all duration-300 hover:scale-[1.01]  ease-in-out overflow-hidden 
+        className=" w-auto shadow-md rounded-md cursor-pointer hover:shadow-xl  transition-all duration-300 hover:scale-[1.01]  ease-in-out overflow-hidden 
         dark:*:text-white group h-full" >
   {
     img &&   
@@ -29,9 +29,8 @@ const BlogCard: React.FC<blogcardprops> = ({ img, title, description, id, ...pro
     </p>
     <ProfileCard {...props} />
   </div>
-</div>
-
-        </Link>
+      </div>
+    </Link>
                       
   )
 }

pages/Home.tsx

@@ -30,7 +30,7 @@ const Home = () => {
                 }
                     {data?.slice(start,end).map((data) => (
                         <div key={data.id} className="flex-grow sm:flex-grow-0 sm:w-[calc(50%-1rem)]
-                        lg:w-[calc(33.33%-1rem)] *:sm:max-w-full *:h-full">
+                        lg:w-[calc(33.33%-1rem)] *:sm:min-w-full *:h-full">
                             <BlogCard {
                                 ...{
                                 img: data.banner.img,