make link buttons take up one column

Author: outofambit

src/layouts/CommunityLayout.astro

@@ -64,9 +64,11 @@ setJumpToState({
         ))
       }
     </ul>
-    <LinkButton url="/sketches" variant="link" class="mt-lg"
-      >{t("All Sketches")}</LinkButton
-    >
+    <div class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+      <LinkButton url="/sketches" variant="link" class="mt-lg col-span-1 w-full"
+        >{t("All Sketches")}</LinkButton
+      >
+    </div>
   </section>
   <hr />
   <section class="mt-md mb-xl">
@@ -80,9 +82,13 @@ setJumpToState({
         ))
       }
     </ul>
-    <LinkButton url="/libraries" variant="link" class="mt-lg"
-      >{t("All Libraries")}</LinkButton
-    >
+    <div class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+      <LinkButton
+        url="/libraries"
+        variant="link"
+        class="mt-lg col-span-1 w-full">{t("All Libraries")}</LinkButton
+      >
+    </div>
   </section>
   <hr />
   <section class="mt-md mb-xl">
@@ -103,8 +109,10 @@ setJumpToState({
         ))
       }
     </ul>
-    <LinkButton url="/events" variant="link" class="mt-lg"
-      >{t("All Events")}</LinkButton
-    >
+    <div class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+      <LinkButton url="/events" variant="link" class="mt-lg col-span-1 w-full"
+        >{t("All Events")}</LinkButton
+      >
+    </div>
   </section>
 </BaseLayout>