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

@@ -4,22 +4,64 @@
     left: 0;
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
 
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 50px;
 
     .client {
         width: 500px;
         height: 800px;
         box-sizing: border-box;
 
-        margin-left: 50px;
-
         box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
 
-        &:nth-child(0) {
+        .image {
-            margin-left: 0px;
+            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;
+        }
+    }
+}
+
+// desktop/tablet less wide
+@media (max-width: 1200px) and (min-width: 901px) {
+    .buttons .client {
+        width: 400px;
+    }
+}
+
+// mobile
+@media (max-width: 900px) {
+    .buttons {
+        flex-direction: column;
+        justify-content: flex-start;
+        overflow-y: scroll;
+        padding: 20px 0;
+    }
+}
+
+// mobile less wide
+@media (max-width: 550px) {
+    .buttons .client {
+        width: 400px;
+    }
+}