From 86dd0c1de117a8fb29c3ccb8540aab97e709ce4b Mon Sep 17 00:00:00 2001
From: Raphael Mattos <raphael.mattos@contextaware.com.br>
Date: Wed, 13 Dec 2023 18:38:26 -0300
Subject: [PATCH 1/2] feat(cxl-ui): cxl-app-layout -> remove box shadow from 2c
 layouts

---
 packages/cxl-ui/scss/cxl-app-layout/_layout-2c.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/cxl-ui/scss/cxl-app-layout/_layout-2c.scss b/packages/cxl-ui/scss/cxl-app-layout/_layout-2c.scss
index 3ebd720e..e74be747 100644
--- a/packages/cxl-ui/scss/cxl-app-layout/_layout-2c.scss
+++ b/packages/cxl-ui/scss/cxl-app-layout/_layout-2c.scss
@@ -162,13 +162,4 @@ $vertical-padding: var(--cxl-wrap-padding);
     }
   }
 }
-
-/**
- * Visuals.
- */
-:host([layout^="2c"][wide]) {
-  main {
-    box-shadow: var(--lumo-box-shadow-s);
-  }
-}
 /* stylelint-enable no-duplicate-selectors */

From ba8b8d5e23dcaf0891f367b1825368a4f60ddd79 Mon Sep 17 00:00:00 2001
From: Raphael Mattos <raphael.mattos@contextaware.com.br>
Date: Wed, 13 Dec 2023 22:18:14 -0300
Subject: [PATCH 2/2] feat(cxl-lumo-styles): utility classes to apply
 background element design

---
 packages/cxl-lumo-styles/scss/global.scss | 45 +++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
index de8f4913..89d73504 100644
--- a/packages/cxl-lumo-styles/scss/global.scss
+++ b/packages/cxl-lumo-styles/scss/global.scss
@@ -317,5 +317,50 @@ ul.courses-list {
       --cxl-thumbnail-size: calc(var(--lumo-icon-size-l) * 3);
     }
   }
+}
+
+// Background elements, only for tablet and larger size screens,
+
+@media #{mq.$medium} {
+
+  .cxl-wide-background {
+    @include mixins.wide-background();
+  }
+
+  .cxl-wide-background-hero {
+    @include mixins.wide-background-hero();
+  }
+
+  .cxl-wide-background-hero-image {
+    @include mixins.wide-background-hero-image();
+  }
+
+  .cxl-wide-background-left {
+    @include mixins.extend-background-left();
+  }
+
+  .cxl-wide-background-right {
+    @include mixins.extend-background-right();
+  }
+
+  .cxl-wide-background-black {
+    @include mixins.wide-background-color(var(--cxl-brand-color-black));
+  }
+
+  .cxl-wide-background-red {
+    @include mixins.wide-background-color(var(--lumo-primary-color));
+  }
+
+  .cxl-wide-background-blue {
+    @include mixins.wide-background-color(var(--cxl-brand-color-blue));
+  }
+
+  .cxl-wide-background-light-blue {
+    @include mixins.wide-background-color(var(--cxl-brand-color-light-blue));
+  }
+
+  .cxl-wide-background-green {
+    @include mixins.wide-background-color(var(--cxl-brand-color-green));
+  }
 
 }