grid3

src/App.css

@@ -18,7 +18,7 @@ header>img {
   text-transform: uppercase;
 }
 
-.part2{
+.part2 {
   display: grid;
 }
 
@@ -85,7 +85,7 @@ hr {
   .grid-container {
     display: grid;
     grid-template-columns: auto auto;
-    
+
   }
 
   .grid-container>div {
@@ -103,27 +103,23 @@ hr {
 }
 
 @media screen and (min-width: 780px) {
-  .grid-container {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    
-  }
-
   .grid-container>div {
-    width: 100%;
     height: 50vh;
     overflow: hidden;
   }
 }
 
 @media screen and (min-width: 992px) {
+  .grid-container {
+    grid-template-columns: 33.3% 33.3% 33.3%;
+  }
+
   .grid-container>div {
-    display: flex;
-    min-height: 50px;
-    padding: 5%;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    min-height: 50vh;
     overflow: hidden;
     align-items: center;
-    justify-content: space-between;
   }
 
   header {
@@ -135,18 +131,10 @@ hr {
   }
 
   .mainimage {
-     max-width: 100%;  
-     max-height: 300px;  
-  }
-
-  .part1 {
-   min-width: 300px;
-  }
-
-  .part2{
-    max-width: fit-content;
+    max-width: 100%;
+    max-height: 280px;
   }
-
+  
   .grid-container h4 {
     text-transform: initial;
     font-size: 18px;
@@ -168,15 +156,15 @@ hr {
 
   @media screen and (min-width: 2040px) {
     .mainimage {
-      min-height:350px ;
+      min-height: 350px;
     }
-    
+
   }
 
   @media screen and (min-width: 2380px) {
-    .grid-container >div {
-        padding-left: 100px;
+    .grid-container>div {
+      padding-left: 100px;
     }
-    
+
   }
 }
\ No newline at end of file