flex2

src/App.css

@@ -65,7 +65,6 @@ hr {
 }
 
 .mainimage {
-  display: block;
   margin: auto;
   max-width: 100%;
 }
@@ -81,10 +80,11 @@ hr {
 }
 
 @media screen and (min-width: 540px) {
- .flex-container{
-   display: flex;
-   flex-wrap: wrap;
- }  
+  .flex-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .flex-container>div {
     width: 50%;
     height: 100vh;
@@ -109,11 +109,11 @@ hr {
 
 @media screen and (min-width: 992px) {
   .flex-container>div {
-    width: 33.3%;
+    display: flex;
     min-height: 50vh;
     padding: 2%;
     overflow: hidden;
-    height: fit-content;
+    align-items: center;
   }
 
   header {
@@ -124,34 +124,18 @@ hr {
     height: 25px;
   }
 
-  .part1 {
-    width: 50%;
-    display: flex;
-    flex-wrap: wrap;  
-    margin-top: 25px;
-  }
-
-  .part2 {
-    width: 50%;
-    float: right;
-  }
-
-  .subimage {
-    height: 50px;
-  }
-
   .mainimage {
-    margin-right: 0;
-    object-fit: contain;
     max-height: 300px;
+  }
 
+  .part2 {
+    margin-left: 30px;
   }
 
   .flex-container h4 {
     text-transform: initial;
     font-size: 18px;
     font-weight: normal;
-    margin: 2px;
   }
 
   .flex-container p {
@@ -159,11 +143,6 @@ hr {
     text-transform: uppercase;
     opacity: initial;
     font-weight: normal;
-    margin: 2px;
-  }
-
-  .desc {
-    margin: 0px;
   }
 
   @media screen and (min-width: 1570px) {
@@ -180,9 +159,12 @@ hr {
     }
   }
 
-  @media screen and (min-width: 2560px) {
-    .mainimage{
-      min-height: 500px;
+  @media screen and (min-width: 2040px) {
+    .mainimage {
+      min-height: 450px;
+    }
+    .part2{
+      margin-left: 100px;
     }
   }
-}
+}
\ No newline at end of file