flexzoom

src/App.css

+body {
+  font-size: 1vw;
+}
+
 header {
   padding: 15px;
   position: sticky;
@@ -76,9 +80,10 @@ hr {
 }
 
 .subimage {
-  margin-bottom: 30px;
-  max-height: 60px;
-  max-width: 130px;
+  margin-bottom: 0.5em;
+  height: 3em;
+  width: 4em;
+  object-fit: contain;
 }
 
 @media screen and (min-width: 540px) {
@@ -134,9 +139,7 @@ hr {
   }
 
   .mainimage {
-    max-width: 100%;
-    max-height: 300px;
-
+   width: 10em;
   }
 
   .part1 {
@@ -150,42 +153,14 @@ hr {
 
   .flex-container h4 {
     text-transform: initial;
-    font-size: 18px;
+    font-size: 1em;
     font-weight: normal;
   }
 
   .flex-container p {
-    font-size: 15px;
+    font-size: 0.7em;
     text-transform: uppercase;
     opacity: initial;
     font-weight: normal;
   }
-  @media screen and (min-width: 2040px) {
-    .mainimage {
-      min-height: 320px;
-    }
-    .flex-container>div {
-      min-height: 400px;
-    }
-  }
-
-  @media screen and (min-width: 2380px) {
-    .flex-container>div {
-      padding-left: 100px;
-      min-height: 450px;
-    }
-
-    .mainimage{
-      max-height: 400px;
-    }
-
-    .flex-container h4{
-      font-size:25px;
-    }
-
-    .flex-container p{
-      font-size:22px;
-    }
-
-  }
 }
\ No newline at end of file