Fix button arrangement on small screens

Signed-off-by: Steve Scargall <[email protected]>

Author: sscargal

themes/memmachine/assets/css/styles.css

@@ -365,6 +365,7 @@ header nav ul li a:hover {
   justify-content: center;
   margin: 32px 0 48px;
 }
+
 .hero-chat {
   padding: 31px;
   margin-bottom: 96px;
@@ -1635,6 +1636,36 @@ footer p {
     transform: translateX(-50%);
   }
 }
+
+@media screen and (max-width: 800px) {
+.hero-btn > div {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+  }
+  .hero-btn a {
+    margin: 0 !important;
+    width: 90vw;
+    max-width: 350px;
+  }
+
+  .ready-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .ready-section .btn {
+    margin: 0 !important;
+    width: 90vw;
+    max-width: 350px;
+    display: block;
+  }
+  .ready-section a.btn + a.btn {
+    margin-top: 16px !important;
+  }
+}
+
 @media screen and (max-width: 430px) {
   .title {
     font-size: 38px;
@@ -2067,4 +2098,4 @@ footer p {
   font-family: serif;
   line-height: 1;
   pointer-events: none;
-}
+}