.

frontend/src/app/components/page/page.component.scss

@@ -59,7 +59,9 @@
       &:not(:nth-last-child(1)) {
         margin-right: var(--medium-padding);
         @media (max-width: $mobile-width) {
-          margin-right: var(--small-padding);
+          // Was --small-padding (7.5px) — too tight to read as a real gap
+          // between white tower cards on the cream-pink background.
+          margin-right: var(--medium-padding);
         }
       }
     }
@@ -76,6 +78,35 @@
         }
       }
     }
+
+    // Mobile: fixed-width towers with horizontal scroll (1.5-column rhythm).
+    // This block is declared AFTER the @for loop so it wins the specificity race
+    // without needing !important on every property — only the width triples need it
+    // to beat the per-child-count selectors generated above.
+    @media (max-width: $mobile-width) {
+      overflow-x: auto;
+      overflow-y: visible;
+      -webkit-overflow-scrolling: touch;
+      scroll-snap-type: x mandatory;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      // Side padding lets the first and last tower scroll fully into view.
+      padding: 0 var(--medium-padding);
+      max-width: 100%;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      // Override the @for width-calc rules above.
+      & > * {
+        width: calc(66vw - var(--small-padding)) !important;
+        max-width: calc(66vw - var(--small-padding)) !important;
+        min-width: calc(66vw - var(--small-padding)) !important;
+        scroll-snap-align: start;
+        flex-shrink: 0;
+      }
+    }
   }
 
   .double-slider-container {
@@ -89,7 +120,11 @@
     @include card();
     width: 66vw;
     max-width: 500px;
-    @media (max-width: $mobile-width) { width: 300px; }
+    @media (max-width: $mobile-width) {
+      width: 88vw;
+      max-width: 88vw;
+      padding: var(--medium-padding);
+    }
     box-sizing: border-box;
     padding: var(--large-padding);
     position: relative;
@@ -101,7 +136,7 @@
       @include center-child();
       .exit {
         position: absolute;
-        left: var(--large-padding);
+        right: var(--large-padding);
         @include exit();
       }
     }
@@ -115,11 +150,21 @@
       justify-content: center;
       gap: var(--large-padding);
 
+      button {
+        max-width: 100%;
+      }
+
       button.danger {
         color: #b53f3f;
         border-bottom-color: #b53f3f55;
         &:after { background-color: #b53f3f; }
       }
+
+      @media (max-width: $mobile-width) {
+        flex-direction: column;
+        gap: var(--small-padding);
+        button { width: 100%; }
+      }
     }
   }