grid3

src/App.css

@@ -18,7 +18,7 @@ header>img {
   text-transform: uppercase;
 }
 
-.part2{
+.part2 {
   display: grid;
 }
 
@@ -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 {
@@ -136,15 +132,7 @@ hr {
 
   .mainimage {
     max-width: 100%;
-     max-height: 300px;  
-  }
-
-  .part1 {
-   min-width: 300px;
-  }
-
-  .part2{
-    max-width: fit-content;
+    max-height: 280px;
   }
   
   .grid-container h4 {
@@ -168,13 +156,13 @@ hr {
 
   @media screen and (min-width: 2040px) {
     .mainimage {
-      min-height:350px ;
+      min-height: 350px;
     }
 
   }
 
   @media screen and (min-width: 2380px) {
-    .grid-container >div {
+    .grid-container>div {
       padding-left: 100px;
     }