feat: optimize grid responsiveness

components/Card.tsx

@@ -12,7 +12,7 @@ export function Card(
       class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
   lg:w-56 lg:h-56 
   sm:w-48 sm:h-48
-  w-32 h-32"
+  w-[37vw] h-[37vw]"
     >
       <div class="h-full flex flex-col justify-between relative z-10">
         <div>

components/Grid.tsx

@@ -2,10 +2,7 @@ import { ComponentChildren } from "preact";
 
 export const Grid = ({ children }: { children: ComponentChildren }) => {
   return (
-    <div
+    <div class="grid gap-4 py-6 custom-grid">
-      class="grid gap-4 py-6"
-      style={{ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))" }}
-    >
       {children}
     </div>
   );

routes/recipes/index.tsx

@@ -15,9 +15,9 @@ export const handler: Handlers<Recipe[] | null> = {
 export default function Greet(props: PageProps<Recipe[] | null>) {
   return (
     <MainLayout url={props.url}>
-      <header class="flex gap-4 items-center mb-5 md:hidden">
+      <header class="flex gap-4 items-center mb-2 lg:mb-5 md:hidden">
         <a
-          class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
+          class="px-4 lg:ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
           href="/"
         >
           <IconArrowLeft class="w-5 h-5" />

static/global.css

@@ -10,6 +10,16 @@ a {
   color: cadetblue
 }
 
+.custom-grid {
+  grid-template-columns: repeat(auto-fit, minmax(37vw, 1fr)) ;
+}
+
+@media(min-width: 640px){
+.custom-grid {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) ;
+}
+}
+
 .noisy-gradient::after {
   content: "";
   top: 0;