Changed paye layout

src/components/BgGrid.astro

@@ -1,24 +1,34 @@
 <div
   id="grid-bg-wrapper"
-  class="contrast-more:hidden absolute -inset-full -z-10 isolate grid place-items-center pointer-events-none"
+  class="contrast-more:hidden absolute inset-0 -z-10 isolate grid place-items-center pointer-events-none"
 >
-  <svg
-    id="grid-bg"
-    class="col-start-1 row-start-1 w-full h-full opacity-50" xmlns="http://www.w3.org/2000/svg"
-    style="mask-image: radial-gradient(circle at center, black 0%, black 5%, transparent 28%);"
-  >
-    <defs>
-      <pattern id="grid" width="38" height="38" patternUnits="userSpaceOnUse">
-        <path d="M 100 0 L 0 0 0 38" class="stroke-emerald-500 contrast-more:stroke-emerald-700" fill="none" stroke-width="1"/>
-      </pattern>
-    </defs>
-  
-    <rect width="100%" height="100%" fill="url(#grid)" />
-  </svg>
+  <div id="grid-bg-inner" class="col-start-1 row-start-1 w-full h-full">
+    <svg
+      id="grid-bg"
+      class="  opacity-50" xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <pattern id="grid" width="38" height="38" x="19" y="19" patternUnits="userSpaceOnUse">
+          <path d="M 100 0 L 0 0 0 38" class="stroke-emerald-500 contrast-more:stroke-emerald-700" fill="none" stroke-width="1"/>
+        </pattern>
+      </defs>
+
+      <rect width="100%" height="100%" fill="url(#grid)" />
+    </svg>
+  </div>
 </div>
 
-<style lang="scss">
-  #grid-bg {
-    transform: scaleY(0.7) skewX(-24deg) skewY(12deg);
+<style>
+  #grid-bg-inner {
+    overflow: hidden;
   }
+#grid-bg {
+  width: 100%;
+  height: 100%;
+  transform: scaleY(0.7) skewX(-24deg) skewY(12deg);
+  mask-image: radial-gradient(circle at center, black 0%, transparent 60%)
+}
+#grid-bg rect {
+  transform: ;
+}
 </style>

src/components/Card.astro

@@ -36,7 +36,7 @@ const { imageCover, imageHeight, imageWidth, imageLoading = "lazy" } = Astro.pro
       <slot name="heading" />
     </header>
 
-    <div class="body text-slate-400 flow text-[.9em]">
+    <div class="body text-slate-400 flow text-[.9em] max-h-48 overflow-y-auto">
       <slot name="body" />
     </div>
   </div>