From 87e4536713795765e9300e72b3262395b07e76b3 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 25 Jul 2024 16:29:18 +0200
Subject: [PATCH] feat: landing page - responsive cards

---
 .../Landing/CardComponent/style.module.scss          |  1 +
 src/pages/landing/LandingPage.tsx                    | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Landing/CardComponent/style.module.scss b/src/components/Landing/CardComponent/style.module.scss
index f82e98f..029bc2e 100644
--- a/src/components/Landing/CardComponent/style.module.scss
+++ b/src/components/Landing/CardComponent/style.module.scss
@@ -32,6 +32,7 @@
   flex-direction: column;
 
   gap: 25px;
+  word-break: break-word;
 }
 
 .icon {
diff --git a/src/pages/landing/LandingPage.tsx b/src/pages/landing/LandingPage.tsx
index e169d34..b463264 100644
--- a/src/pages/landing/LandingPage.tsx
+++ b/src/pages/landing/LandingPage.tsx
@@ -196,7 +196,17 @@ export const LandingPage = () => {
           and verification.
         </Typography>
       </Typography>
-      <Box display={'grid'} gap={'25px'} gridTemplateColumns="repeat(3, 1fr)">
+      <Box
+        display={'grid'}
+        gap={'25px'}
+        sx={{
+          gridTemplateColumns: {
+            xs: '1fr',
+            sm: 'repeat(2, 1fr)',
+            xl: 'repeat(3, 1fr)'
+          }
+        }}
+      >
         {cards.map((c, i) => (
           <CardComponent key={i} {...c} />
         ))}