style: enhance image responsiveness in markdown and clean up grid layout

Author: Llewellyn500

app/globals.css

@@ -194,6 +194,13 @@
   margin-bottom: 0.5em !important;
 }
 
+/* Images */
+.markdown-body img {
+  max-width: 100%;
+  height: auto;
+  margin: 1.5em 0;
+}
+
 /* Bold Text */
 .markdown-body strong,
 .markdown-body b {

app/posts/[title]/page.tsx

@@ -209,7 +209,7 @@ export default async function ArticleDetails({
             Latest Posts
           </Subheading>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border border-white border-collapse mb-12 md:mb-48">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  mb-12 md:mb-48">
             {latestArticles.map((article) => (
               <article className="border border-white p-8" key={article.id}>
                 <div className="flex items-center justify-between">