css/layout/main.css

@@ -30,9 +30,11 @@
     max-width: 1092px;
     width: 100%;
     height: 435px;
-    display: flex;
-    justify-content: space-around;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    justify-content: center;
     align-items: center;
+    gap: 20px;
     position: relative;
     margin: auto;
 }
@@ -49,7 +51,6 @@
     max-width: 350.33px;
     height: 100%;
     max-height: 287.95px;
-    /* padding: 26px; */
     background: #FFFFFF;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
     display: flex;
@@ -57,12 +58,15 @@
     align-items: center;
     flex-direction: column;
     margin: 0px auto;
+    padding: 27px;
 }
 
 .first-card p, .second-card p, .three-card p {
-    width: 299px;
+    max-width: 299px;
+    width: 100%;
+    height: 100%;
     text-align: center;
-    margin: 27px 0;
+    margin-top: 14px;
 }
 
 .banner-desktop, .banner-mobile {
@@ -107,7 +111,6 @@
     width: 367px;
     text-align: center;
     margin-top: 14px;
-    margin-bottom: 66px;
 }
 
 .content-text-final {
@@ -185,9 +188,9 @@
     .content-card-container {
         width: 100%;
         height: 894px;
-        flex-direction: column;
+        grid-template-columns: repeat(1, 1fr);
         justify-content: space-around;
-
+        margin: 0 30px;
     }
 
     .banner-desktop {
@@ -204,8 +207,9 @@
         width: 100%;
         max-width: 368px;
         height: 100%;
-        max-height: 332px;
+        min-height: 332px;
         padding: 32px;
+        
     }
 
 
@@ -218,18 +222,23 @@
         width: 100%;
         max-width: 367px;
         height: 100%;
-        margin: 14px auto;
+        margin-top: 14px;
     }
 
     .grid-container {
         width: 100%;
-        height: 1394px;
+        height: 100%;
+        min-height: 1394px;
     }
 
     .content-text-final {
         flex-direction: column;
     }
 
+    .text-final-container {
+        padding: 0 14px;
+    }
+
     .content-text-final img {
         width: 100%;
         max-width: 414px;

index.html

@@ -81,7 +81,7 @@
         </section>
         <section class="content-text-final">
             <img src="./assets/img/Rectangle 15.png">
-            <div>
+            <div class="text-final-container">
               <h3>Lorem ipsum dolor sit amet</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
                 Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.