Fix blog list page styling

Author: DilsonsPickles

src/pages/blog.astro

@@ -12,11 +12,11 @@ const publishedBlogPosts = await getCollection("blog", ({ data }) => {
 
 <BaseLayout title="Audacity ® | Blog">
   <section id="main" class="pt-8 pb-16">
-    <div class="max-w-screen-xl mx-6 sm:mx-12 md:mx-16 xl:mx-auto">
+    <div class="max-w-screen-lg mx-6 sm:mx-12 md:mx-16 lg:mx-32 xl:mx-auto">
       <h2 class="text-left sm:text-center">Blog posts</h2>
 
       <div
-        class="grid grid-cols-12 my-4 sm:my-8 md:my-12 gap-y-8 sm:gap-8 md:gap-12"
+        class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 my-4 sm:my-8 md:my-12 gap-8 sm:gap-8 md:gap-12"
       >
         {
          publishedBlogPosts.sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime()).map((post) => {