@designcrowd/library.brand-page 5.18.0 → 5.18.1-ast-display-styles-1

package/lib/src/{CreatedOnBrandCrowd-de-de-xmkupPus.js → CreatedOnBrandCrowd-de-de-DB2oJ5vl.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CSRUPpSo.js";
+import { _ as t } from "./lib-mcvVokSM.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-Ck7EdTtb.js → CreatedOnBrandCrowd-en-us-fbk0Gf2G.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CSRUPpSo.js";
+import { _ as t } from "./lib-mcvVokSM.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-BC8sJuDH.js → CreatedOnBrandCrowd-es-es-Ch4Q9__I.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CSRUPpSo.js";
+import { _ as t } from "./lib-mcvVokSM.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CN-UBe1q.js → CreatedOnBrandCrowd-fr-ca-DaHJ6OMH.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CSRUPpSo.js";
+import { _ as t } from "./lib-mcvVokSM.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CN-UBe1q.js → CreatedOnBrandCrowd-fr-fr-DaHJ6OMH.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CSRUPpSo.js";
+import { _ as t } from "./lib-mcvVokSM.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CajQyNkx.js → CreatedOnBrandCrowd-pt-br-BgF8UCqy.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CSRUPpSo.js";
+import { _ as t } from "./lib-mcvVokSM.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-CajQyNkx.js → CreatedOnBrandCrowd-pt-pt-BgF8UCqy.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CSRUPpSo.js";
+import { _ as t } from "./lib-mcvVokSM.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-BRCNMmDq.js → CreatedOnDcom-de-de-j3rcGaGp.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CSRUPpSo.js";
+import { _ as e } from "./lib-mcvVokSM.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-BzQDtZhc.js → CreatedOnDcom-en-us-Cx4eQPRU.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CSRUPpSo.js";
+import { _ as e } from "./lib-mcvVokSM.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-D-qAM4Cd.js → CreatedOnDcom-es-es-D-1APCL9.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CSRUPpSo.js";
+import { _ as e } from "./lib-mcvVokSM.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-CZ1irFOc.js → CreatedOnDcom-fr-ca-DAHdBw0D.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CSRUPpSo.js";
+import { _ as e } from "./lib-mcvVokSM.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-Gb5BCF0N.js → CreatedOnDcom-fr-fr-BYAw2kXr.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CSRUPpSo.js";
+import { _ as e } from "./lib-mcvVokSM.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-CAQV0q6o.js → CreatedOnDcom-pt-br-CdSknjZg.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CSRUPpSo.js";
+import { _ as M } from "./lib-mcvVokSM.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-D6tQdQFh.js → CreatedOnDcom-pt-pt-DzyZ2j80.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CSRUPpSo.js";
+import { _ as M } from "./lib-mcvVokSM.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/page/Page.mixin.d.ts

@@ -145,8 +145,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     viewport: ViewportsType;
     isMobileDevice: boolean;
-    containerClientWidth: number | undefined;
     containerClientHeight: number | undefined;
+    containerClientWidth: number | undefined;
     isContentSelected: boolean;
     isHeaderSelected: boolean;
     isFooterSelected: boolean;

package/lib/src/brand-page/components/page/PageComponent.mixin.d.ts

@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     brandPageToken: string;
     isMobileDevice: boolean;
-    containerClientWidth: number;
     containerClientHeight: number;
+    containerClientWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page/constants/misc.constants.d.ts

@@ -12,6 +12,12 @@ export declare const ALIGN_LEFT_BIG_IMAGE = "left-aligned-big-image";
 export declare const ALIGN_CARD_CENTER_IMAGE = "center-card-aligned-image";
 export declare const ALIGN_CARD_CENTER = "center-card-aligned";
 export declare const ALIGN_CARD_LEFT_IMAGE = "left-card-aligned-image";
+export declare const ALIGN_TOP_CARD_IMAGE = "top-card-aligned-image";
+export declare const ALIGN_BOTTOM_CARD_IMAGE = "bottom-card-aligned-image";
+export declare const ALIGN_MIDDLE_CARD_IMAGE = "middle-card-aligned-image";
+export declare const ALIGN_TOP_FULL_IMAGE = "top-aligned-full-image";
+export declare const ALIGN_BOTTOM_FULL_IMAGE = "bottom-aligned-full-image";
+export declare const ALIGN_MIDDLE_FULL_IMAGE = "middle-aligned-full-image";
 export declare const MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH = 3;
 export declare const TEXT_COLUMNS: {
     readonly 1: "1";

package/lib/src/brand-page/constants/misc.constants.js

@@ -13,6 +13,12 @@ export const ALIGN_LEFT_BIG_IMAGE = 'left-aligned-big-image';
 export const ALIGN_CARD_CENTER_IMAGE = 'center-card-aligned-image';
 export const ALIGN_CARD_CENTER = 'center-card-aligned';
 export const ALIGN_CARD_LEFT_IMAGE = 'left-card-aligned-image';
+export const ALIGN_TOP_CARD_IMAGE = 'top-card-aligned-image';
+export const ALIGN_BOTTOM_CARD_IMAGE = 'bottom-card-aligned-image';
+export const ALIGN_MIDDLE_CARD_IMAGE = 'middle-card-aligned-image';
+export const ALIGN_TOP_FULL_IMAGE = 'top-aligned-full-image';
+export const ALIGN_BOTTOM_FULL_IMAGE = 'bottom-aligned-full-image';
+export const ALIGN_MIDDLE_FULL_IMAGE = 'middle-aligned-full-image';
 export const MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH = 3;
 export const TEXT_COLUMNS = {
     1: '1',

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -1312,8 +1312,8 @@ declare const _default: import("vue").DefineComponent<{}, {
 }>, {
     viewport: import("@brand-page").ViewportsType;
     isMobileDevice: boolean;
-    containerClientWidth: number | undefined;
     containerClientHeight: number | undefined;
+    containerClientWidth: number | undefined;
     isContentSelected: boolean;
     isHeaderSelected: boolean;
     isFooterSelected: boolean;

package/lib/src/brand-page-maker/convertors/banner-align-display-style.convertor.js

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_TOP_CARD_IMAGE, ALIGN_BOTTOM_CARD_IMAGE, ALIGN_MIDDLE_CARD_IMAGE, ALIGN_TOP_FULL_IMAGE, ALIGN_BOTTOM_FULL_IMAGE, ALIGN_MIDDLE_FULL_IMAGE, } from '@brand-page/constants';
 export const bannerAlignDisplayStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -28,6 +28,54 @@ export const bannerAlignDisplayStyleConvertor = {
                     iconViewBox: '0 0 110 64',
                     dataAttribute: 'data-test-btn-text-only',
                 },
+                {
+                    title: '',
+                    value: ALIGN_TOP_CARD_IMAGE,
+                    isSelected: value === ALIGN_TOP_CARD_IMAGE,
+                    iconName: 'display-style-banner-10',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-top-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_BOTTOM_CARD_IMAGE,
+                    isSelected: value === ALIGN_BOTTOM_CARD_IMAGE,
+                    iconName: 'display-style-banner-11',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-bottom-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_MIDDLE_CARD_IMAGE,
+                    isSelected: value === ALIGN_MIDDLE_CARD_IMAGE,
+                    iconName: 'display-style-banner-12',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-middle-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_TOP_FULL_IMAGE,
+                    isSelected: value === ALIGN_TOP_FULL_IMAGE,
+                    iconName: 'display-style-banner-13',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-top-full-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_BOTTOM_FULL_IMAGE,
+                    isSelected: value === ALIGN_BOTTOM_FULL_IMAGE,
+                    iconName: 'display-style-banner-14',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-bottom-full-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_MIDDLE_FULL_IMAGE,
+                    isSelected: value === ALIGN_MIDDLE_FULL_IMAGE,
+                    iconName: 'display-style-banner-15',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-middle-full-image',
+                },
                 {
                     title: '',
                     value: BIG_IMAGE,
@@ -86,7 +134,13 @@ export const bannerAlignDisplayStyleConvertor = {
         if (!selectedOption ||
             selectedOption.value === ALIGN_CENTERED ||
             selectedOption.value === BIG_IMAGE ||
-            selectedOption.value === ALIGN_CARD_CENTER_IMAGE) {
+            selectedOption.value === ALIGN_CARD_CENTER_IMAGE ||
+            selectedOption.value === ALIGN_TOP_CARD_IMAGE ||
+            selectedOption.value === ALIGN_BOTTOM_CARD_IMAGE ||
+            selectedOption.value === ALIGN_MIDDLE_CARD_IMAGE ||
+            selectedOption.value === ALIGN_TOP_FULL_IMAGE ||
+            selectedOption.value === ALIGN_BOTTOM_FULL_IMAGE ||
+            selectedOption.value === ALIGN_MIDDLE_FULL_IMAGE) {
             textAlign = 'center';
         }
         return {

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -530,6 +530,12 @@ a.maker-anchor {
 .tw-ml-auto {
     margin-left: auto
 }
+.tw-mr-0 {
+    margin-right: 0px
+}
+.tw-mr-0\.5 {
+    margin-right: 0.125rem
+}
 .tw-mr-1 {
     margin-right: 0.25rem
 }
@@ -620,6 +626,9 @@ a.maker-anchor {
 .tw-hidden {
     display: none
 }
+.tw-aspect-\[3\/1\] {
+    aspect-ratio: 3/1
+}
 .tw-aspect-auto {
     aspect-ratio: auto
 }
@@ -3028,6 +3037,14 @@ a.maker-anchor {
     --tw-text-opacity: 1;
     color: rgb(145 16 38 / var(--tw-text-opacity))
 }
+.tw-text-grayscale-300 {
+    --tw-text-opacity: 1;
+    color: rgb(239 239 239 / var(--tw-text-opacity))
+}
+.tw-text-grayscale-400 {
+    --tw-text-opacity: 1;
+    color: rgb(230 230 230 / var(--tw-text-opacity))
+}
 .tw-text-grayscale-500 {
     --tw-text-opacity: 1;
     color: rgb(208 208 208 / var(--tw-text-opacity))
@@ -3340,6 +3357,10 @@ a.maker-anchor {
         --tw-bg-opacity: 1;
         background-color: rgb(208 208 208 / var(--tw-bg-opacity))
     }
+    .hover\:tw-bg-grayscale-700:hover {
+        --tw-bg-opacity: 1;
+        background-color: rgb(43 43 43 / var(--tw-bg-opacity))
+    }
     .hover\:tw-bg-info-100:hover {
         --tw-bg-opacity: 1;
         background-color: rgb(204 234 247 / var(--tw-bg-opacity))
@@ -3486,6 +3507,19 @@ a.maker-anchor {
     outline: 2px solid transparent;
     outline-offset: 2px
 }
+.focus-visible\:tw-ring-2:focus-visible {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+.focus-visible\:tw-ring-primary-500:focus-visible {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(242 27 63 / var(--tw-ring-opacity))
+}
+.focus-visible\:tw-ring-offset-2:focus-visible {
+    --tw-ring-offset-width: 2px
+}
 @media (hover: hover) and (pointer: fine) {
     .tw-group:hover .group-hover\:tw-visible {
         visibility: visible
@@ -4111,10 +4145,10 @@ a.maker-anchor {
   line-height: 1.25rem;
 }
 
-.arc[data-v-75f7d315] {
-  animation: ai-loader-circle-75f7d315 2000ms infinite linear;
+.arc[data-v-dd807356] {
+  animation: ai-loader-circle-dd807356 2000ms infinite linear;
 }
-@keyframes ai-loader-circle-75f7d315 {
+@keyframes ai-loader-circle-dd807356 {
 0% {
     transform: rotateZ(0deg);
 }
@@ -4122,10 +4156,10 @@ a.maker-anchor {
     transform: rotateZ(360deg);
 }
 }
-#primary[data-v-75f7d315] {
-  animation: ai-loader-primary-75f7d315 2000ms infinite ease-in-out;
+.primary[data-v-dd807356] {
+  animation: ai-loader-primary-dd807356 2000ms infinite ease-in-out;
 }
-@keyframes ai-loader-primary-75f7d315 {
+@keyframes ai-loader-primary-dd807356 {
 0% {
     transform: scale(1);
 }
@@ -4136,13 +4170,13 @@ a.maker-anchor {
     transform: scale(1);
 }
 }
-#top-star[data-v-75f7d315] {
-  animation: ai-loader-secondary-top-75f7d315 2000ms infinite ease-in-out;
+.top-star[data-v-dd807356] {
+  animation: ai-loader-secondary-top-dd807356 2000ms infinite ease-in-out;
 }
-#bottom-star[data-v-75f7d315] {
-  animation: ai-loader-secondary-bottom-75f7d315 2000ms infinite ease-in-out;
+.bottom-star[data-v-dd807356] {
+  animation: ai-loader-secondary-bottom-dd807356 2000ms infinite ease-in-out;
 }
-@keyframes ai-loader-secondary-bottom-75f7d315 {
+@keyframes ai-loader-secondary-bottom-dd807356 {
 0% {
     transform: scale(1);
 }
@@ -4153,7 +4187,7 @@ a.maker-anchor {
     transform: scale(1);
 }
 }
-@keyframes ai-loader-secondary-top-75f7d315 {
+@keyframes ai-loader-secondary-top-dd807356 {
 0% {
     transform: scale(1);
 }
@@ -5541,76 +5575,45 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   fill: currentColor;
 }
 
-.c-placeholder[data-v-51d8de03] {
+.c-placeholder[data-v-6ed918ee] {
   background-color: #fff;
   display: block;
 }
-.c-placeholder__content[data-v-51d8de03] {
+
+/*
+ * Provide a positioning context for the absolute SVG icon — but only when the
+ * caller hasn't already positioned the placeholder itself. Some callers pass
+ * `tw-absolute` (e.g. the big-image banner uses it to fill the banner as a
+ * background); a blanket `position: relative` here would out-specify that
+ * utility and break the layout. An already-positioned placeholder is its own
+ * containing block, so the SVG fills it either way.
+ */
+.c-placeholder[data-v-6ed918ee]:not(.tw-absolute):not(.tw-fixed) {
   position: relative;
-  display: block;
 }
-.c-placeholder__content[data-v-51d8de03]::after {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--height) / 2);
-  --border-left: calc(var(--n-size) * 2 + var(--width) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  top: calc(var(--size) * 2);
-  left: var(--size);
-  content: ' ';
-  border-top: var(--border) solid transparent;
-  border-bottom: var(--border) solid transparent;
-  border-left: var(--border-left) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
-}
-.c-placeholder__content[data-v-51d8de03]::before {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--height) / 2);
-  --border-right: calc(var(--n-size) * 2 + var(--width) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  top: calc(var(--size) * 2);
-  right: var(--size);
-  content: ' ';
-  border-top: var(--border) solid transparent;
-  border-bottom: var(--border) solid transparent;
-  border-right: var(--border-right) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
-}
-.c-placeholder[data-v-51d8de03]::after {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--width) / 2);
-  --border-right: calc(var(--n-size) * 2 + var(--height) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  left: calc(var(--size) * 2);
-  top: var(--size);
-  content: ' ';
-  border-left: var(--border) solid transparent;
-  border-right: var(--border) solid transparent;
-  border-top: var(--border-right) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
-}
-.c-placeholder[data-v-51d8de03]::before {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--width) / 2);
-  --border-bottom: calc(var(--n-size) * 2 + var(--height) / 2);
-  --tw-border-opacity: 0.5;
+
+/*
+ * The X icon is drawn as an SVG with preserveAspectRatio="none" so the
+ * diagonals always run corner-to-corner regardless of the box aspect ratio
+ * (square thumbnails through full-width 2/1 banners). vector-effect keeps the
+ * stroke an even width while the viewBox is stretched non-uniformly. The SVG
+ * is absolutely positioned so it fills the box sized by min-height / the
+ * caller's aspect-ratio class rather than driving the height itself.
+ */
+.c-placeholder__icon[data-v-6ed918ee] {
   position: absolute;
-  left: calc(var(--size) * 2);
-  bottom: var(--size);
-  content: ' ';
-  border-left: var(--border) solid transparent;
-  border-right: var(--border) solid transparent;
-  border-bottom: var(--border-bottom) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
 }
-.c-placeholder__content[data-v-51d8de03] > [data-v-51d8de03] {
-  padding-bottom: 0.5rem;
+.c-placeholder__fill[data-v-6ed918ee] {
+  fill: rgb(208 208 208 / 0.5);
+}
+.c-placeholder__icon line[data-v-6ed918ee] {
+  stroke: #fff;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
 }
 
 .c-image {
@@ -6226,10 +6229,10 @@ select[data-v-14e7c7c7] {
     text-align: center
 }
 
-.c_banner--with-image-overlay[data-v-c9625b02] {
+.c_banner--with-image-overlay[data-v-3875c37b] {
   min-height: 24rem;
 }
-.c_banner--divided-container[data-v-c9625b02] {
+.c_banner--divided-container[data-v-3875c37b] {
   min-height: 30rem;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -6237,67 +6240,80 @@ select[data-v-14e7c7c7] {
           flex-direction: row;
   gap: 1rem;
 }
-.device-wrapper--mobile .c_banner--divided-container[data-v-c9625b02] {
+.device-wrapper--mobile .c_banner--divided-container[data-v-3875c37b] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
-.c_banner-container[data-v-c9625b02] {
+.c_banner-container[data-v-3875c37b] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c_banner--with-image-flip[data-v-c9625b02] {
+
+/*
+ * Full-bleed stacked image. The wrapper lives inside .c_banner-container
+ * (capped at --brandsite-max-width and centered) and inside the outer
+ * tw-px-6 padding, so a plain width:100%/-mx-6 stops at the max-width edge.
+ * Using the outer container-query width (100cqw = content-box inline size),
+ * widen to the full banner and shift left so the image spans edge to edge
+ * (1.5rem = tw-px-6). Text blocks stay constrained to the max-width.
+ */
+.c_banner-stacked-image--full[data-v-3875c37b] {
+  width: calc(100cqw + 3rem);
+  margin-inline: calc(50% - 50cqw - 1.5rem);
+}
+.c_banner--with-image-flip[data-v-3875c37b] {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
 }
-.c_banner--divided-container[data-v-c9625b02] .full-square-image {
+.c_banner--divided-container[data-v-3875c37b] .full-square-image {
   width: 100%;
   aspect-ratio: 1/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @container (min-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-c9625b02] {
+.c_banner-container--left-aligned-stacking[data-v-3875c37b] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c_banner-container--right-aligned-stacking[data-v-c9625b02] {
+.c_banner-container--right-aligned-stacking[data-v-3875c37b] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
 }
-.c_banner-button--stacking[data-v-c9625b02] {
+.c_banner-button--stacking[data-v-3875c37b] {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
 }
 }
 @container (max-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-c9625b02] {
+.c_banner-container--left-aligned-stacking[data-v-3875c37b] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-container--right-aligned-stacking[data-v-c9625b02] {
+.c_banner-container--right-aligned-stacking[data-v-3875c37b] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-item--stacking[data-v-c9625b02] {
+.c_banner-item--stacking[data-v-3875c37b] {
     width: 100%;
 }
-.c_banner-button--stacking[data-v-c9625b02] {
+.c_banner-button--stacking[data-v-3875c37b] {
     width: 100%;
 }
-.c_banner--divided-container[data-v-c9625b02] {
+.c_banner--divided-container[data-v-3875c37b] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -8991,7 +9007,7 @@ input[type='number'][data-v-b7154ee1] {
   color: #686e7d;
 }
 
-.page-settings-section-style_option-title[data-v-e6909f88] {
+.page-settings-section-style_option-title[data-v-c93e7fd0] {
     font-family: Lato, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;