feat: landing page - responsive cards

src/components/Landing/CardComponent/style.module.scss

@@ -32,6 +32,7 @@
   flex-direction: column;
 
   gap: 25px;
+  word-break: break-word;
 }
 
 .icon {

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} />
         ))}