Make blog grid more responsive

src/pages/blog/index.astro

@@ -21,7 +21,9 @@ const posts = (await getCollection("blog")).sort(
     <Header />
     <main>
       <section>
-        <ul class="container grid grid-cols-3 gap-6 m-4 mb-6 text-text">
+        <ul
+          class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 m-4 my-6 text-text"
+        >
           {
             posts.map((post) => (
               <li>

src/pages/index.astro

@@ -23,9 +23,7 @@ import Button from "../components/ui/Button.astro";
           tuned!
         </p>
         <div class="flex flex-row gap-2">
-          <Button>
-            <a href="/blog">Read my blog</a>
-          </Button>
+          <a href="/blog"><Button>Read my blog</Button></a>
         </div>
       </div>
     </main>