flexzoom3

src/App.css

@@ -3,7 +3,7 @@ body {
 }
 
 header {
-  padding: 15px;
+  padding: 3em;
   position: sticky;
   top: 0;
   background-color: #fcf8f8;
@@ -80,10 +80,10 @@ hr {
 }
 
 .subimage {
-  margin-bottom: 7em;
-  height: 15em;
-  width: 25em;
+  height: 14em;
+  width: 20em;
   object-fit: contain;
+  margin-bottom: 7em;
 }
 
 @media screen and (min-width: 540px) {
@@ -104,6 +104,13 @@ hr {
     background-color: initial;
     filter: invert(1);
   }
+
+  .subimage{
+    height: 10em;
+    width: 12em;
+    object-fit: contain;
+    margin-bottom: 3.5em;
+  }
 }
 
 @media screen and (min-width: 780px) {
@@ -117,6 +124,13 @@ hr {
   .mainimage{
     max-width: 100%;
   }
+.subimage{
+  width: 10em;
+  height: 8em;
+  margin-bottom: 2em;
+  object-fit: contain;
+}
+
 }
 
 @media screen and (min-width: 992px) {
@@ -127,11 +141,11 @@ hr {
     overflow: hidden;
     align-items: center;
     justify-content: space-between;
-    min-height: 350px;
+    min-height: 20em;
   }
 
   header {
-    padding: 20px;
+    padding: 2em;
   }
 
   header>img {
@@ -143,8 +157,8 @@ hr {
   }
 
   .subimage {
-    margin-bottom: 0.5em;
-    width: 4em;
+    margin-bottom: 1em;
+    width: 5em;
     height: 4em;
     object-fit: contain;
   }