Fix squashed layout on Tutorials page for mobile devices

Author: Rahulchaudharyji2

src/layouts/TutorialsLayout.astro

@@ -21,7 +21,7 @@ const sections = categories.map((slug) => {
     .filter((e: TutorialEntry) => e.data.category === slug)
     .sort(
       (a: TutorialEntry, b: TutorialEntry) =>
-        (a.data.categoryIndex ?? 1000) - (b.data.categoryIndex ?? 1000)
+        (a.data.categoryIndex ?? 1000) - (b.data.categoryIndex ?? 1000),
     );
 
   return { slug, name, sectionEntries };
@@ -55,7 +55,7 @@ setJumpToState({
         </h2>
         <ul class="content-grid border-b border-sidebar-type-color last:border-0">
           {sectionEntries.map((entry: TutorialEntry, i: number) => (
-            <li class="col-span-3">
+            <li class="col-span-6 md:col-span-3">
               <GridItemTutorial item={entry} lazyLoad={i > 3} />
             </li>
           ))}
@@ -66,7 +66,9 @@ setJumpToState({
 
   <section>
     <h2 class="mb-gutter-md mt-0">
-      {t("tutorialCategories", "education-resources")}<a id="education-resources"></a> <!-- ✅ changed from tutorialsPage -->
+      {t("tutorialCategories", "education-resources")}<a
+        id="education-resources"></a>
+      <!-- ✅ changed from tutorialsPage -->
     </h2>
     <p>{t("tutorialsPage", "education-resources-snippet")}</p>
     <LinkButton url="/education-resources" variant="link" class="mt-lg">