From 603a2fd9d4729d25fe0ba3bf787d5c5332e71414 Mon Sep 17 00:00:00 2001
From: Kurtis Holsapple <kurtis@openfunctioncomputers.com>
Date: Tue, 17 Jun 2025 10:57:42 -0700
Subject: [PATCH] four col thing

---
 dist/app.css                            | 15 ++++++++++-
 dist/mix-manifest.json                  |  2 +-
 src/scss/flex-background-image-cta.scss | 35 ++++++++++++++++++-------
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/dist/app.css b/dist/app.css
index 9d27b9d..90999ca 100644
--- a/dist/app.css
+++ b/dist/app.css
@@ -12558,7 +12558,7 @@ footer.sub-footer {
   background-position: center;
   position: relative;
 }
-.background-image-cta:before {
+.background-image-cta.overlay-White:before {
   content: "";
   position: absolute;
   top: 0;
@@ -12568,6 +12568,19 @@ footer.sub-footer {
   background: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
   z-index: 1;
 }
+.background-image-cta.overlay-Black {
+  color: #fff;
+}
+.background-image-cta.overlay-Black:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 1;
+}
 .background-image-cta .container {
   position: relative;
   z-index: 2;
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
index bb44b70..b4a7be8 100644
--- a/dist/mix-manifest.json
+++ b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=8af0c9c0d989b79afe124f8138dc1a63",
-    "/app.css": "/app.css?id=e77da36fa217185e7b13dbdd5e313ebf"
+    "/app.css": "/app.css?id=1d2f6afaa80ea821ddceaec15e7c98e7"
 }
diff --git a/src/scss/flex-background-image-cta.scss b/src/scss/flex-background-image-cta.scss
index ae44620..6e8807c 100644
--- a/src/scss/flex-background-image-cta.scss
+++ b/src/scss/flex-background-image-cta.scss
@@ -4,15 +4,32 @@
     background-position: center;
     position: relative;
 
-    &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
-        z-index: 1;
+    &.overlay-White {
+        &:before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to right, rgba($c-white, 0.8), transparent);
+            z-index: 1;
+        }
+    }
+
+    &.overlay-Black {
+        color: $c-white;
+
+        &:before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba($c-black, 0.8);
+            z-index: 1;
+        }
     }
 
     .container {