flex7

src/App.css

@@ -18,7 +18,7 @@ header>img {
   text-transform: uppercase;
 }
 
-.part2{
+.part2 {
   display: flex;
 }
 
@@ -102,21 +102,27 @@ hr {
 }
 
 @media screen and (min-width: 780px) {
+
   .flex-container>div {
     width: 33.3%;
     height: 50vh;
     overflow: hidden;
+    min-height: 850px;
+  }
+  .mainimage{
+    max-width: 100%;
   }
 }
 
 @media screen and (min-width: 992px) {
   .flex-container>div {
     display: flex;
-    min-height: 50px;
+    min-height: 50%;
     padding: 2%;
     overflow: hidden;
     align-items: center;
     justify-content: space-between;
+    min-height: 350px;
   }
 
   header {
@@ -128,16 +134,18 @@ hr {
   }
 
   .mainimage {
-    max-width: 164px;  
+    max-width: 100%;
+    max-height: 300px;
+
   }
 
   .part1 {
-   min-width: 150px;
+    min-width: 150px;
   }
 
-  .part2{
+  .part2 {
     flex-grow: 1;
-    /* max-width: fit-content; */
+    margin-left: 5%;
   }
 
   .flex-container h4 {
@@ -152,25 +160,32 @@ hr {
     opacity: initial;
     font-weight: normal;
   }
-
-  @media screen and (min-width: 1570px) {
-    .mainimage {
-      min-height: 300px;
-      max-width: 200px;
-    }
-  }
-
   @media screen and (min-width: 2040px) {
     .mainimage {
-      min-height:350px ;
+      min-height: 320px;
+    }
+    .flex-container>div {
+      min-height: 400px;
     }
-    
   }
 
   @media screen and (min-width: 2380px) {
-    .flex-container >div {
-        padding-left: 100px;
+    .flex-container>div {
+      padding-left: 100px;
+      min-height: 450px;
+    }
+
+    .mainimage{
+      max-height: 400px;
+    }
+
+    .flex-container h4{
+      font-size:25px;
+    }
+
+    .flex-container p{
+      font-size:22px;
     }
-    
+
   }
 }
\ No newline at end of file