Merge pull request #27235 from overleaf/mf-fix-non-aligned-mobile-buttons-begin-now-card

[web] Fix non-aligned mobile buttons for non-logged-in user on "\begin{now}" card

GitOrigin-RevId: 3cf6dd1291d9ff85b88477f7379edd59c4776704

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -10,6 +10,7 @@
 @import 'popover';
 @import 'card';
 @import 'badge';
+@import 'begin-now-card';
 @import 'form';
 @import 'icon';
 @import 'input-suggestions';

services/web/frontend/stylesheets/bootstrap-5/components/begin-now-card.scss

@@ -0,0 +1,25 @@
+.begin-now-card {
+  margin: calc(var(--spacing-16) * 2) 0;
+
+  .card-links {
+    .card-link + .card-link {
+      margin-left: var(--spacing-06);
+    }
+
+    @include media-breakpoint-down(md) {
+      .card-link + .card-link {
+        margin-left: 0;
+      }
+
+      .card-link {
+        width: 100%;
+        margin-left: 0;
+        margin-top: var(--spacing-05);
+      }
+
+      .card-link:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/pages/content.scss

@@ -12,25 +12,10 @@
 
   word-break: break-word;
 
-  .btn + .btn,
-  .card-link + .card-link {
+  .btn + .btn {
     margin-left: var(--spacing-06);
   }
 
-  .card-links {
-    @include media-breakpoint-down(md) {
-      .btn {
-        width: 100%;
-        margin-left: 0;
-        margin-top: var(--spacing-05);
-      }
-
-      .btn:first-child {
-        margin-top: 0;
-      }
-    }
-  }
-
   /*
       Links and Buttons
     */
@@ -48,10 +33,6 @@
     border-color: var(--neutral-30);
   }
 
-  .begin-now-card {
-    margin: calc(var(--spacing-16) * 2) 0;
-  }
-
   // TODO: only used on about page. Confirm with UX changes needed
   // .container-small {
   //   section .section-row {