From 5ae806f277889a2e2531ed46a99bba679cad812a Mon Sep 17 00:00:00 2001
From: Julien Viala <julien.viala@shine.fr>
Date: Thu, 2 May 2024 22:45:13 +0200
Subject: [PATCH] tailwind container & grid

---
 src/components/@common/Grid.astro |  8 ++++----
 src/pages/index.astro             | 11 +++++++++--
 src/styles/base.css               | 17 +++++++++++++++++
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/@common/Grid.astro b/src/components/@common/Grid.astro
index 7bd9c00..c14b8c8 100644
--- a/src/components/@common/Grid.astro
+++ b/src/components/@common/Grid.astro
@@ -13,11 +13,11 @@ const { as: HTMLTag = "div", class: cssClasses, ...props } = Astro.props;
 <HTMLTag
   class:list={[
     "grid",
-    "gap-x-5",
-    "grid-cols-6",
-    "lg:gap-x-8",
+    "grid-cols-4",
+    "gap-x-2.5",
+    "sm:grid-cols-8",
+    "sm:gap-x-5",
     "lg:grid-cols-12",
-    "responsive-wrapper",
     cssClasses,
   ]}
   {...props}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a5c575a..b789322 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,19 @@
 ---
 import MainLayout from "layouts/main.astro";
+import Grid from "components/@common/Grid.astro";
 ---
 
 <MainLayout
-  title="Home sweet home"
+  title="Home"
   description="Page description"
   og_title="Open Graph Title"
   og_description="Open Graph Description"
 >
-  <p class="body-normal">Hey</p>
+  <div class="container">
+    <Grid>
+      <div class="bg-neutral3 col-span-full">
+        <div>Hey</div>
+      </div>
+    </Grid>
+  </div>
 </MainLayout>
diff --git a/src/styles/base.css b/src/styles/base.css
index bd59941..a71378d 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -28,6 +28,23 @@
 }
 
 @layer utilities {
+  .container {
+    margin: 0 auto;
+    max-width: calc(100% - 40px);
+
+    @screen lg {
+      max-width: 904px;
+    }
+
+    @screen xl {
+      max-width: 1160px;
+    }
+
+    @screen 2xl {
+      max-width: 1320px;
+    }
+  }
+
   .display-large-highlight {
     font-size: 36px;
     line-height: 120%;