From ad43c05c0c1b62517b8c471a2c7b25d41a22751a Mon Sep 17 00:00:00 2001
From: Kurtis Holsapple <kurtis@openfunctioncomputers.com>
Date: Tue, 13 May 2025 11:23:22 -0700
Subject: [PATCH] WIP

---
 dist/app.css                    | 5 +++++
 dist/mix-manifest.json          | 2 +-
 src/scss/flex-side-by-side.scss | 3 +++
 tpl/flex_3_column_callouts.tpl  | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/dist/app.css b/dist/app.css
index 2233d1e..7f29174 100644
--- a/dist/app.css
+++ b/dist/app.css
@@ -12186,6 +12186,11 @@ section.side-by-side-text h2, section.side-by-side-text .h2 {
   max-width: 595px;
 }
 @media (min-width: 768px) {
+  section.side-by-side-text .right > * {
+    padding-left: 3rem;
+  }
+}
+@media (min-width: 992px) {
   section.side-by-side-text .right > * {
     padding-left: 6rem;
   }
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
index aa63095..8c23e04 100644
--- a/dist/mix-manifest.json
+++ b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=e87e05bd26822b1fc6dae092decfb838",
-    "/app.css": "/app.css?id=3df98911b576384a8ce51bb29cb95129"
+    "/app.css": "/app.css?id=06457e5fb8e59066a01c29dc23a22a3f"
 }
diff --git a/src/scss/flex-side-by-side.scss b/src/scss/flex-side-by-side.scss
index becc3ed..13b6dd3 100644
--- a/src/scss/flex-side-by-side.scss
+++ b/src/scss/flex-side-by-side.scss
@@ -11,6 +11,9 @@ section.side-by-side-text {
     .right {
         & > * {
             @include media-breakpoint-up(md) {
+                padding-left: 3rem;
+            }
+            @include media-breakpoint-up(lg) {
                 padding-left: 6rem;
             }
         }
diff --git a/tpl/flex_3_column_callouts.tpl b/tpl/flex_3_column_callouts.tpl
index 2ee6cea..7b6f2bc 100644
--- a/tpl/flex_3_column_callouts.tpl
+++ b/tpl/flex_3_column_callouts.tpl
@@ -1,5 +1,5 @@
 <section class="flex_3_column_callouts">
-    <div class="d-flex">
+    <div class="d-flex flex-column flex-lg-row">
         {{#each callouts}}
             <div class="callout">
                 <div class="image-wrapper">