css/layout/header.css

@@ -12,3 +12,4 @@ header a img {
     display: block;
 }
 
+

css/layout/main.css

@@ -15,18 +15,20 @@
 }
 
 .three-computers {
-    width: 315px;
-    height: 315px;
+    width: 100%;
+    max-width: 315px;
     margin-left: 124px;
 }
 
 
 .first-content-text {
+    width: 100%;
     max-width: 766px;
 }
 
 .content-card-container {
     max-width: 1092px;
+    width: 100%;
     height: 435px;
     display: flex;
     justify-content: space-around;
@@ -43,15 +45,18 @@
 }
 
 .first-card, .second-card, .three-card {
-    width: 350.33px;
-    height: 287.95px;
+    width: 100%;
+    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;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    margin: auto;
+    margin: 0px auto;
 }
 
 .first-card p, .second-card p, .three-card p {
@@ -91,9 +96,6 @@
     height: 332px;
     background: #FFFFFF;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
-}
-
-.grid-one, .grid-two, .grid-three, .grid-four {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -114,7 +116,9 @@
     align-items: center;
     position: relative;
     max-width: 1186px;
-    height: 596px;
+    width: 100%;
+    height: 100%;
+    max-height: 596px;
     margin: auto;
     top: 242px;
 }
@@ -134,15 +138,20 @@
 
 .content-text-final p {
     max-width: 550px;
+    width: 100%;
     height: 120px;
     line-height: 24px;
 }
 
-@media screen and (max-width: 415px) {
+@media screen and (max-width: 1024px) {
     .main_banner_desktop {
         display: none;
     }
 
+    .main_banner_mobile {
+        width: 100%;
+    }
+
     .first-content-information {
         flex-direction: column;
         margin-top: 84px;
@@ -152,8 +161,8 @@
     }
 
     .three-computers {
-        width: 239px;
-        height: 239px;
+        width: 100%;
+        max-width: 239px;
         margin-top: 137px;
         margin-left: 0;
         position: relative;
@@ -165,7 +174,8 @@
     }
 
     .first-content-card {
-        width: auto;
+        width: 100%;
+        max-width: 1092px;
         height: 966px;
         display: flex;
         justify-content: center;
@@ -173,7 +183,7 @@
     }
 
     .content-card-container {
-        width: auto;
+        width: 100%;
         height: 894px;
         flex-direction: column;
         justify-content: space-around;
@@ -187,24 +197,32 @@
     .grid-container-content {
         grid-template-columns: repeat(1, 1fr);
         gap: 20px;
+        margin: 0 23px;
     }
 
     .grid-one, .grid-two, .grid-three, .grid-four {
-        width: 368px;
-        height: 332px;
+        width: 100%;
+        max-width: 368px;
+        height: 100%;
+        max-height: 332px;
+        padding: 32px;
     }
 
 
     .grid-one p, .grid-two p, .grid-three p, .grid-four p {
-        padding: 0 33px;
         font-weight: 400;
         font-size: 14px;
         line-height: 24px;
         text-align: center;
         color: #000000;
+        width: 100%;
+        max-width: 367px;
+        height: 100%;
+        margin: 14px auto;
     }
 
     .grid-container {
+        width: 100%;
         height: 1394px;
     }
 
@@ -213,8 +231,8 @@
     }
 
     .content-text-final img {
-        width: 414px;
-        height: 414px;
+        width: 100%;
+        max-width: 414px;
         margin-right: 0;
         margin-bottom: 51px;
     }
@@ -227,7 +245,8 @@
     }
 
     .content-text-final p {
-        width: 350px;
+        width: 100%;
+        max-width: 350px;
         height: 192px;
         font-weight: 400;
         font-size: 16px;
@@ -236,7 +255,7 @@
 
 }
 
-@media screen and (min-width: 415px) {
+@media screen and (min-width: 1024px) {
     .main_banner_mobile {
         display: none;
     }