Update index.css

Flex/src/index.css

@@ -7,6 +7,7 @@
 }
 
 body {
+  max-width: 1920px;
   margin: 0 auto;
 }
 
@@ -16,6 +17,7 @@ html {
 img {
   display: block;
   max-width: 100%;
+  object-fit: contain;
 }
 
 nav {
@@ -33,7 +35,7 @@ nav img {
 }
 .main {
   display: block;
-  min-height: 100vh;
+  min-height: calc(100vh - 60px);
   margin-inline: auto;
   width: 100%;
 }
@@ -43,19 +45,19 @@ nav img {
   flex-direction: column;
   align-items: center;
   flex-shrink: 1;
-  flex-grow: 0;
   flex-basis: 100%;
-  min-height: auto;
+  min-height: 50svh;
+  padding: 4rem;
 }
-.card .about,
+
+/* .card .about,
 .card .img {
   display: inline-block;
   vertical-align: middle;
-  text-align: left;
-}
+  /* text-align: left; */
+} */
 
 .card .about {
-  width: 100%;
   margin-inline: auto;
 }
 
@@ -87,31 +89,13 @@ nav img {
   margin-block: 0.7rem;
 }
 
-.card .about img {
-  width: 100%;
-}
-
-.card img {
-  object-fit: contain;
-  width: 100%;
-}
-
-.card .img {
-  width: 100%;
-  max-width: 100%;
-  text-align: center;
-  margin: 0 auto;
-}
 
 .card .img {
-  width: 100%;
-  height: auto;
-  max-width: 100%;
   object-fit: contain;
-  display: block;
+
   max-width: 25rem;
+  margin: 0 auto;
   height: 100%;
-  margin-inline: auto;
   margin-top: 3rem;
 }
 .card .about .logo {
@@ -147,25 +131,19 @@ nav img {
 .card.card-6 {
   background: #4ec2e7;
 }
-.card .about,
-.card .img {
-  display: inline-block;
-  max-width: 85%;
-  margin-bottom: 40px;
-  width: 100%;
-  /* padding-left: 2.5rem; */
-  padding-top: 3rem;
-}
-.card .img {
+
+/* .card .img {
   margin: 10px 5%;
-  min-height: 15rem;
+  /* min-height: 15rem;
   max-width: 18rem; 
-  margin-left: 7rem;
 }
 .card-1 .img {
   margin-left: 5rem;
-  max-width: 22rem;
+  /* max-width: 22rem;
 } 
+/* .card-6 .img {
+  max-width: 23rem;
+} */
 .card .about h4 {
   font-size: 1.7rem;
   margin-top: 10px;
@@ -215,47 +193,55 @@ nav img {
   .card {
     display: flex;
     flex-direction: row;
+    gap: 10px;
     justify-content: space-between;
     align-items: center;
     flex-basis: 50%;
     box-sizing: border-box;
     padding: 2rem;
-    height: 50vh;
     width: 50%;
     flex-shrink: 1;
-    min-height: 50svh;
+    min-height: 30svh;
     overflow: hidden;
   }
   .card .img img {
     width: 100%;
     height: 100%;
+    max-width: 20rem;
+    margin: 0 auto;
   }
   .card .about {
-    margin: 0;
+    width: 60%;
+
+    padding-left: 10%;
   }
   .card .img {
+    width: 40%;
+    display: flex;
+  }
+  .card-6 .img img {
+    width: 110%;
+    max-width: none;
+  }
+  /* .card .img {
     max-height: 35rem;
     max-width: 10rem;
     margin-top: auto;
-  }
+  } */
 
-  .card-1 .about,
-  .card-1 .img {
-    margin-top: -2rem;
-  }
-  .card .img {
+  /* .card .img {
     max-width: 50%;
     margin: 0px 0;
     margin-left: 5%;
-  }
-  .about {
+  } */
+  /* .about {
     margin-left: 2rem;
-  }
+  } */
   .card .about h4 {
     font-size: 1.6rem;
     text-transform: none;
     font-weight: 400;
-    margin-top: 10px;
+    margin-top: 5px;
   }
 
   .card .about h5 {
@@ -269,16 +255,12 @@ nav img {
     max-width: 40%;
     width: 100%;
   }
-  .card-6 .img {
+  /* .card-6 .img {
     max-width: 55%;
     width: 100%;
-  }
+  } */
 }
 @media (min-width: 1024px) {
-  body {
-    max-width: 2160px;
-    margin-inline: auto;
-  }
   .main {
     display: flex;
     flex-wrap: wrap;
@@ -292,9 +274,7 @@ nav img {
     justify-content: space-around;
     align-items: center;
   }
-  .card .about {
-    margin-left: 3rem;
-  }
+
   .card .about .logo {
     width: 6rem;
   }
@@ -327,7 +307,7 @@ nav img {
   .card .about h5 {
     font-size: 1.2rem;
   }
-  .card-6 .about {
+  /* .card-6 .about {
     margin-bottom: 1rem;
   }
   .card-3 .about {
@@ -341,24 +321,24 @@ nav img {
   }
   .card.card-6 .img img {
     max-width: 22rem;
-    /* padding: 4rem; */
-  }
+
+  } */
 }
 @media (min-width: 1280px) {
   .card {
     display: flex;
     flex-shrink: 1;
   }
-  .card .img {
+  /* .card .img {
     max-width: 34rem;
-  }
+  } */
   .card .about h4 {
     font-size: 1.6rem;
   }
   .card .about h5 {
     font-size: 1.3rem;
   }
-  .card.card-6 .img img {
+  /* .card.card-6 .img img {
     max-width: 22rem;
-  }
+  } */
 }