gridzoom

src/App.css

+body{
+  font-size: 1vw;
+}
+
+
 header {
   padding: 15px;
   position: sticky;
@@ -76,7 +81,7 @@ hr {
 }
 
 .subimage {
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   max-height: 60px;
   max-width: 130px;
 }
@@ -130,6 +135,7 @@ hr {
     overflow: hidden;
     align-items: center;
     min-height: 350px ;
+    padding: 3em;
   }
 
   header {
@@ -140,41 +146,27 @@ hr {
     height: 25px;
   }
 
+  .subimage{
+    height: 5em;
+    width: 5em;
+    object-fit: contain;
+  }
+
   .mainimage {
-    max-width: 100%;
-    max-height: 280px;
+    width: 10em;
+    /* height: em; */
   }
   
   .grid-container h4 {
     text-transform: initial;
-    font-size: 16px;
+    font-size: 1em;
     font-weight: normal;
   }
 
   .grid-container p {
-    font-size: 13px;
+    font-size: 0.8em;
     text-transform: uppercase;
     opacity: initial;
     font-weight: normal;
   }
-
-  @media screen and (min-width: 1570px) {
-    .mainimage {
-      min-height: 250px;
-    }
-  }
-
-  @media screen and (min-width: 2040px) {
-    .mainimage {
-      min-height: 350px;
-    }
-
-  }
-
-  @media screen and (min-width: 2380px) {
-    .grid-container>div {
-      padding-left: 100px;
-    }
-
-  }
 }
\ No newline at end of file