From 1e5b609f2cfcaf728e3ce1deef66642451a41e11 Mon Sep 17 00:00:00 2001
From: zomo <admin@zomo.dev>
Date: Fri, 28 Nov 2025 12:28:07 -0600
Subject: [PATCH] updated responsive height layout

---
 src/ButtonNew.tsx  |  2 +-
 src/ButtonOld.tsx  |  2 +-
 src/buttonNew.scss | 10 +---------
 src/buttonOld.scss | 11 -----------
 src/buttons.scss   | 22 ++++++++++++++++++++++
 5 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/ButtonNew.tsx b/src/ButtonNew.tsx
index dcdeccf..a320dc7 100644
--- a/src/ButtonNew.tsx
+++ b/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>
diff --git a/src/ButtonOld.tsx b/src/ButtonOld.tsx
index 89a6ac0..4f0c830 100644
--- a/src/ButtonOld.tsx
+++ b/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>
diff --git a/src/buttonNew.scss b/src/buttonNew.scss
index ea2c6db..ae88777 100644
--- a/src/buttonNew.scss
+++ b/src/buttonNew.scss
@@ -17,16 +17,8 @@
     align-items: center;
     flex-direction: column;
 
-    img {
-        height: 450px;
+    .image {
         margin-top: 30px;
-        margin-bottom: 30px;
-    }
-
-    .content {
-        flex-grow: 1;
-
-        text-align: center;
     }
 
     .button {
diff --git a/src/buttonOld.scss b/src/buttonOld.scss
index afa86a8..350d641 100644
--- a/src/buttonOld.scss
+++ b/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 {
diff --git a/src/buttons.scss b/src/buttons.scss
index dfff538..d31cccc 100644
--- a/src/buttons.scss
+++ b/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;
+        }
     }
 }