desktop5

public/index.html

@@ -100,6 +100,7 @@
           <img src="image-6.png" alt="image6" class="mainimage">
         </div>
       </div>
+      
     </div>
   </div>
 </body>

src/App.css

@@ -84,8 +84,9 @@ hr {
   .container>div {
     float: left;
     width: 50%;
-    min-height: 100vh;
+    height: 100vh;
     padding-top: 70px;
+    overflow: hidden;
   }
 
   header {
@@ -99,6 +100,7 @@ hr {
   .container>div {
     width: 33.3%;
     height: 50vh;
+    overflow: hidden;
   }
 }
 
@@ -106,33 +108,45 @@ hr {
   .container>div {
     width: 33.3%;
     min-height: 50vh;
-    padding: 5% 3%;
+    padding: 2%;
+    overflow: hidden;
   }
 
-  .part1{
+  header {
+    padding: 20px;
+  }
+
+  header>img {
+    height: 25px;
+  }
+
+  .part1 {
     width: 50%;
     float: left;
     margin-top: 25px;
   }
 
-  .part2{
+  .part2 {
     width: 50%;
     float: right;
   }
 
-  .subimage{
+  .subimage {
     height: 50px;
   }
 
   .mainimage {
-    margin-right:0;    
-    height: 250px;  
+    margin-right: 0;
+    object-fit: contain;
+    max-height: 300px;
+
   }
 
   .container h4 {
     text-transform: initial;
     font-size: 18px;
     font-weight: normal;
+    margin: 2px;
   }
 
   .container p {
@@ -140,24 +154,30 @@ hr {
     text-transform: uppercase;
     opacity: initial;
     font-weight: normal;
+    margin: 2px;
   }
-  
-  .desc{
+
+  .desc {
     margin: 0px;
   }
-  
+
   @media screen and (min-width: 1570px) {
     .container h4 {
-       font-size: 25px;
-     }
-    
-     .container p {
-      font-size: 20px;
+      font-size: 25px;
     }
 
-    .mainimage{
-      height: 350px;
+    .container p {
+      font-size: 20px;
     }
+
+    .mainimage {
+      min-height: 370px;
     }
   }
 
+  @media screen and (min-width: 2560px) {
+    .mainimage{
+      min-height: 500px;
+    }
+  }
+}
\ No newline at end of file