From 18739d122ed3eb351e2aec988c527828e3f75cc3 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Mon, 21 Oct 2024 11:31:14 -0500
Subject: [PATCH] Merge pull request #21144 from overleaf/jel-auto-width-mobile

[web] Add options for mobile horizontal column alignment and column gaps on CMS BS5 pages

GitOrigin-RevId: 21cf6e181ea6622b06db73c32a4889327146032c
---
 .../stylesheets/bootstrap-5/pages/cms.scss    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index fab835fae4..5293acdad4 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -641,6 +641,40 @@
     .reverse-col-order-mobile {
       flex-direction: column-reverse;
     }
+
+    .section-row {
+      &.section-row-mobile-gap-spacing-16 {
+        @include section-row-custom-gap(calc(var(--spacing-16) / 2));
+      }
+
+      &.section-row-mobile-gap-spacing-15 {
+        @include section-row-custom-gap(calc(var(--spacing-15) / 2));
+      }
+
+      &.section-row-mobile-gap-spacing-14 {
+        @include section-row-custom-gap(calc(var(--spacing-14) / 2));
+      }
+
+      &.section-row-mobile-gap-spacing-13 {
+        @include section-row-custom-gap(calc(var(--spacing-13) / 2));
+      }
+
+      &.section-row-mobile-gap-spacing-12 {
+        @include section-row-custom-gap(calc(var(--spacing-12) / 2));
+      }
+
+      &.section-row-mobile-gap-spacing-11 {
+        @include section-row-custom-gap(calc(var(--spacing-11) / 2));
+      }
+
+      &.section-row-mobile-gap-spacing-10 {
+        @include section-row-custom-gap(calc(var(--spacing-10) / 2));
+      }
+
+      &.section-row-mobile-gap-spacing-09 {
+        @include section-row-custom-gap(calc(var(--spacing-09) / 2));
+      }
+    }
   }
 }