From 777e32c853fcc3766a0c7bc749504790081be1c4 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Tue, 30 Apr 2024 14:45:53 +0000
Subject: [PATCH 1/2] feat(cxl-ui): cxl-section update hero font sizes

https://app.clickup.com/t/86b07ef0e
---
 packages/cxl-ui/scss/global/cxl-section.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/cxl-ui/scss/global/cxl-section.scss b/packages/cxl-ui/scss/global/cxl-section.scss
index 6c76bfcc6..e3982f96f 100644
--- a/packages/cxl-ui/scss/global/cxl-section.scss
+++ b/packages/cxl-ui/scss/global/cxl-section.scss
@@ -1,8 +1,8 @@
 /* stylelint-disable selector-no-qualifying-type */
 @use "~@conversionxl/cxl-lumo-styles/scss/mq";
 
-cxl-section#view-hero, cxl-section[theme~="cxl-hero"] {
-
+cxl-section#view-hero,
+cxl-section[theme~="cxl-hero"] {
   .column-1 {
     @media #{mq.$medium} {
       max-width: 45%;
@@ -13,14 +13,12 @@ cxl-section#view-hero, cxl-section[theme~="cxl-hero"] {
   &.wide-background-red,
   &.wide-background-blue,
   &.wide-background-green {
-
     .column-2 * {
       color: var(--lumo-tint);
     }
   }
 
   &.wide-background-light-blue {
-
     .column-2 {
       * {
         color: var(--lumo-shade);
@@ -28,4 +26,9 @@ cxl-section#view-hero, cxl-section[theme~="cxl-hero"] {
     }
   }
 
+  h1 {
+    @media #{mq.$medium} {
+      font-size: calc((var(--cxl-lumo-font-size-hero) + var(--lumo-font-size-xxxl)) / 2);
+    }
+  }
 }

From 0913a3002a561f6099b15c91b1cc0cd64d9ccccc Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Tue, 30 Apr 2024 14:47:22 +0000
Subject: [PATCH 2/2] refactor(cxl-ui): cxl-section #view-hero breakpoint

https://cxlworld.slack.com/archives/C01JABH8AHX/p1714384594016109?thread_ts=1713699357.038669&cid=C01JABH8AHX
---
 packages/cxl-ui/scss/cxl-section.scss | 28 ++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss
index 219fc6b43..db62eebff 100644
--- a/packages/cxl-ui/scss/cxl-section.scss
+++ b/packages/cxl-ui/scss/cxl-section.scss
@@ -3,7 +3,7 @@
 @use "./mixins" as cxl-mixins;
 
 :host {
-  --figure-height-multiplier: 0.10;
+  --figure-height-multiplier: 0.1;
   --figure-height-factor: calc(var(--figure-height-multiplier) * var(--cxl-content-max-width-wide));
 
   position: relative;
@@ -88,14 +88,8 @@
 }
 
 @media #{mq.$medium} {
-  :host(#view-hero) {
-    @include mixins.wide-background();
-    @include mixins.extend-background-right();
-    @include mixins.wide-background-hero();
-    @include mixins.wide-background-hero-image();
-  }
-
-  :host([theme~="cxl-hero"]) {
+  :host(#view-hero:not(.view-hero-modern)),
+  :host([theme~="cxl-hero"]:not(.view-hero-modern)) {
     @include mixins.wide-background();
     @include mixins.extend-background-right();
     @include mixins.wide-background-hero();
@@ -152,3 +146,19 @@
     }
   }
 }
+
+/**
+ * Breakpoint comes from WordPress columns block. Using this value
+ * is the simplest solution for a hero section layout.
+ *
+ * @see https://cxlworld.slack.com/archives/C01JABH8AHX/p1714384594016109?thread_ts=1713699357.038669&cid=C01JABH8AHX
+ */
+@media only screen and (min-width: 782px) {
+  :host(#view-hero.view-hero-modern),
+  :host([theme~="cxl-hero"].view-hero-modern) {
+    @include mixins.wide-background();
+    @include mixins.extend-background-right();
+    @include mixins.wide-background-hero();
+    @include mixins.wide-background-hero-image();
+  }
+}