Issue #3222784 by ahsannazir, Gauravvvv, zenimagine, shweta__sharma, mherchel,...

Issue #3222784 by ahsannazir, Gauravvvv, zenimagine, shweta__sharma, mherchel, kostyashupenko: Olivero: 'wide-content' utility class breaks layout when placed in 'Hero' region

core/themes/olivero/css/components/wide-content.css

@@ -52,8 +52,8 @@
 
 /* Ensure that image doesn't overlap layout builder sections when editing layouts. */
 
-.layout-builder .wide-content {
+.layout-builder .wide-content,
+.region--hero .wide-content {
   max-width: 100%;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
+  margin-inline: 0;
 }

core/themes/olivero/css/components/wide-content.pcss.css

@@ -39,8 +39,8 @@
 }
 
 /* Ensure that image doesn't overlap layout builder sections when editing layouts. */
-.layout-builder .wide-content {
+.layout-builder .wide-content,
+.region--hero .wide-content {
   max-width: 100%;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
+  margin-inline: 0;
 }

core/themes/olivero/css/layout/region-hero.css

@@ -13,3 +13,8 @@
 .region--hero > *:last-child {
   margin-block-end: 0;
 }
+
+.region--hero .wide-content {
+  max-width: 100%;
+  margin-inline: 0;
+}

core/themes/olivero/css/layout/region-hero.pcss.css

@@ -9,4 +9,9 @@
   & > *:last-child {
     margin-block-end: 0;
   }
+
+  .wide-content {
+    max-width: 100%;
+    margin-inline: 0;
+  }
 }