From 68eaec6d8ef9e383908f2f95731ee4126eba2729 Mon Sep 17 00:00:00 2001
From: MoxAmber <amber.steele@overleaf.com>
Date: Thu, 19 Sep 2024 14:41:28 +0100
Subject: [PATCH] Merge pull request #20485 from
 overleaf/jel-cms-bs5-mobile-breakpoint

[web] Update mobile breakpoint for CMS pages using BS5

GitOrigin-RevId: b855faf378b03788caff8574747d88b96706de2a
---
 .../stylesheets/bootstrap-5/pages/cms.scss    | 71 +++++++++----------
 1 file changed, 35 insertions(+), 36 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index 4fa955af0b..7b3d402b2b 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -78,15 +78,6 @@
     max-width: 1440px;
   }
 
-  // TODO: update if mobile breakpoint changes
-  @include media-breakpoint-down(md) {
-    div[class*='col-'] {
-      &:not(:first-child) {
-        padding-top: var(--spacing-13);
-      }
-    }
-  }
-
   padding-bottom: 0;
 
   img {
@@ -359,18 +350,6 @@
   bottom: 1px;
 }
 
-// `Layout | Grid` display options
-.row-equal-column-heights {
-  @include media-breakpoint-down(md) {
-    div[class*='col-'] {
-      .card,
-      .no-card {
-        height: 100%;
-      }
-    }
-  }
-}
-
 .vertically-center-col {
   // remove margin to better vertically align
   // some elements need to be nested within a container, and others are directly within .no-card/.card
@@ -399,20 +378,6 @@
       margin-bottom: 0;
     }
   }
-
-  @include media-breakpoint-up(md) {
-    display: flex;
-
-    div[class*='col-'] {
-      align-self: center;
-    }
-  }
-}
-
-.reverse-col-order-mobile {
-  @include media-breakpoint-down(md) {
-    flex-direction: column-reverse;
-  }
 }
 
 .row-within-card {
@@ -471,7 +436,41 @@
   padding-bottom: var(--spacing-11);
 }
 
-@include media-breakpoint-up(md) {
+// Desktop layout options depdendent on mobile breakpoint
+@include media-breakpoint-up(lg) {
+  .row-equal-column-heights {
+    div[class*='col-'] {
+      .card,
+      .no-card {
+        height: 100%;
+      }
+    }
+  }
+
+  .vertically-center-col {
+    div[class*='col-'] {
+      align-self: center;
+    }
+  }
+}
+
+// Mobile layout options depdendent on mobile breakpoint
+@include media-breakpoint-down(lg) {
+  .cms-page {
+    div[class*='col-'] {
+      &:not(:first-child) {
+        padding-top: var(--spacing-13);
+      }
+    }
+
+    .reverse-col-order-mobile {
+      flex-direction: column-reverse;
+    }
+  }
+}
+
+// TODO: will be deprecated and gap option used instead
+@include media-breakpoint-up(lg) {
   .desktop-left-margin-sm {
     margin-left: var(--spacing-05);
   }