updated responsive height layout

src/ButtonNew.tsx

@@ -4,7 +4,7 @@ import newclientImage from '/newclient.png'
 function ButtonNew() {
     return (
         <div className="client newclient">
-            <img src={newclientImage} />
+            <img className="image" src={newclientImage} />
             <div className="content">
                 <div>Join with the</div>
                 <div>New Client</div>

src/ButtonOld.tsx

@@ -5,7 +5,7 @@ function ButtonOld() {
     return (
         <div className="client oldclient">
             <div className="oldclient-inner">
-                <img src={oldclientImg} />
+                <img className="image" src={oldclientImg} />
                 <div className="content">
                     <div>JOIN WITH THE</div>
                     <div>OLD CLIENT</div>

src/buttonNew.scss

@@ -17,16 +17,8 @@
     align-items: center;
     flex-direction: column;
 
-    img {
+    .image {
-        height: 450px;
         margin-top: 30px;
-        margin-bottom: 30px;
-    }
-
-    .content {
-        flex-grow: 1;
-
-        text-align: center;
     }
 
     .button {

src/buttonOld.scss

@@ -35,17 +35,6 @@
         display: flex;
         align-items: center;
         flex-direction: column;
-
-        img {
-            height: 450px;
-            margin-bottom: 30px;
-        }
-
-        .content {
-            flex-grow: 1;
-
-            text-align: center;
-        }
     }
 
     .button {

src/buttons.scss

@@ -17,6 +17,28 @@
         box-sizing: border-box;
 
         box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
+
+        .image {
+            height: 450px;
+            margin-bottom: 30px;
+        }
+
+        .content {
+            flex-grow: 1;
+
+            text-align: center;
+        }
+    }
+}
+
+// desktop/tablet less tall
+@media (max-height: 830px) and (min-width: 901px) {
+    .buttons .client {
+        height: 600px;
+
+        .image {
+            height: 300px;
+        }
     }
 }