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

@@ -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;
@@ -87,15 +87,15 @@
   background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/**
+ * 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 #{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 +152,13 @@
     }
   }
 }
+
+@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();
+  }
+}