gridview6

src/App.css

@@ -4,7 +4,7 @@ body{
 
 
 header {
-  padding: 15px;
+  padding: 3em;
   position: sticky;
   top: 0;
   background-color: #fcf8f8;
@@ -12,7 +12,7 @@ header {
 
 header>img {
   filter: invert(1);
-  height: 20px;
+  height: 5em ;
 }
 
 .grid-container h4 {
@@ -82,8 +82,8 @@ hr {
 
 .subimage {
   margin-bottom: 7em;
-  height: 12em;
-  width: 15em;
+  height: 14em;
+  width: 25em;
   object-fit: contain;
 }
 
@@ -94,6 +94,12 @@ hr {
 
   }
 
+  .subimage{
+    width: 12em;
+    height: 10em;
+    object-fit: contain;
+  }
+
   .grid-container>div {
     width: 100%;
     height: 100vh;
@@ -106,6 +112,13 @@ hr {
     background-color: initial;
     filter: invert(1);
   }
+
+  header>img {
+    height: 3em ;
+  }
+
+  
+  
 }
 
 @media screen and (min-width: 780px) {
@@ -120,10 +133,19 @@ hr {
   }
   .mainimage{
     max-width: 100%;
+  }
 
+  .subimage{
+    margin-top:1em ;
+    width: 10em;
+    height: 7em;
+    margin-bottom: 2em;
+    object-fit: contain;
   }
+  
 }
 
+
 @media screen and (min-width: 992px) {
   .grid-container {
     grid-template-columns: 33.3% 33.3% 33.3%;
@@ -135,22 +157,22 @@ hr {
     min-height: 50vh;
     overflow: hidden;
     align-items: center;
-    min-height: 350px ;
     padding: 2em;
+    min-height: 25em;
   }
 
   header {
-    padding: 20px;
+    padding: 1.5em;
   }
 
   header>img {
-    height: 25px;
+    height: 1.2em;
   }
 
   .subimage{
-    margin-bottom: 0.5em;
-    height: 4em;
-    width: 5em;
+    margin-bottom: 1em;
+    height: 3em;
+    width: 4em;
     object-fit: contain;
   }