From bd9fdfe99e03d2295765c4bbe2ede92546efbbc3 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Tue, 22 Jul 2025 09:42:43 -0700
Subject: [PATCH] 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
---
 .../bootstrap-5/components/all.scss           |  1 +
 .../components/begin-now-card.scss            | 25 +++++++++++++++++++
 .../bootstrap-5/pages/content.scss            | 21 +---------------
 3 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/begin-now-card.scss

diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index a0237b47f0..872184615f 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/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';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/begin-now-card.scss b/services/web/frontend/stylesheets/bootstrap-5/components/begin-now-card.scss
new file mode 100644
index 0000000000..113af9e141
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
index 3c25ff6810..650b709108 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
+++ b/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 {