feat(web): Add more Grid columns

packages/web/src/components/astro/HeroComponent.astro

@@ -9,6 +9,49 @@ import { Stack, Grid } from "../solidjs/index.ts";
   stackGap="0px"
 >
   <div class="flex justify-center items-center flex-col">
-    <Grid smGridColumns={8} mdGridColumns={10} lgGridColumns={12} />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      crossRow={1}
+      crossColumn={0}
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
+    <Grid
+      class="before:!border-t-0"
+      style={{ "border-bottom": "none" }}
+      smGridColumns={1}
+      mdGridColumns={1}
+      lgGridColumns={3}
+      heroHeading={true}
+    />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      class="before:!border-t-0"
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      class="before:!border-t-0"
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      class="before:!border-t-0"
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      class="before:!border-t-0"
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
   </div>
 </Stack>

packages/web/src/components/solidjs/index.module.css

@@ -135,6 +135,11 @@
   display: contents;
 }
 
+.grid_headingGrid {
+  grid-template-columns: calc(var(--column-width) / 4) 1fr calc(var(--column-width) / 4) !important;
+  text-wrap: balance;
+}
+
 .grid_gridGuide {
   inset: 0;
   position: absolute;
@@ -145,6 +150,7 @@
   border: var(--guide-width) solid var(--guide-color);
   border-left: none;
   border-top: none;
+  border-bottom: none;
 }
 
 @media screen and (max-width: 400px) {