feat: some shit?

src/pages/index.astro

@@ -13,6 +13,7 @@ import SmallCard from "@components/SmallCard.astro";
 import LinkCard from "@components/LinkCard.astro";
 import ArrowA from "@components/arrows/ArrowA.astro";
 import ArrowB from "@components/arrows/ArrowB.astro";
+import SmallGrid from "@components/SmallGrid.astro";
 
 const projects = filterCollection(
   await getCollection("projects"),
@@ -43,7 +44,7 @@ const otherPosts = posts.filter((post) => featuredPost !== post).slice(0, 3);
     <span class="i-tabler-circle-arrow-right-thin"></span>
     <ArrowA />
     {featuredProject && <HeroCard post={featuredProject} />}
-    <div class="grid xs:grid-cols-2 gap-4 mt-4">
+    <SmallGrid>
       {
         otherProjects.length > 0 &&
           otherProjects.map((project) => <SmallCard post={project} />)
@@ -53,19 +54,19 @@ const otherPosts = posts.filter((post) => featuredPost !== post).slice(0, 3);
         title={t("more-projects")}
         icon="circle-arrow-right"
       />
-    </div>
+    </SmallGrid>
   </section>
 
   <section class="relative my-8">
     {featuredPost && <HeroCard post={featuredPost} />}
 
     <ArrowB />
-    <div class="grid grid-cols-2 gap-4 mt-4">
+    <SmallGrid>
       {
         otherPosts.length > 0 &&
           otherPosts.map((post) => <SmallCard post={post} />)
       }
       <LinkCard link={tp("/blog")} title={t("more-posts")} />
-    </div>
+    </SmallGrid>
   </section>
 </Layout>