From 84b243bcf8c6fd9d38f9cc120a42876f2f657d5c Mon Sep 17 00:00:00 2001 From: Dusan Kosanovic Date: Fri, 4 Sep 2026 13:19:18 +0200 Subject: [PATCH 1/8] Gate ace1209 media edge-to-edge bleed behind a full-width modifier The mobile edge-to-edge margin override (--grid-margin-width: 0) was applied unconditionally to every .rich-content.media block, so any author using the media variant got full-bleed images on mobile whether they wanted it or not. Move it into an explicit .full-width class so it's an opt-in variant. --- libs/mep/ace1209/rich-content/rich-content.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/libs/mep/ace1209/rich-content/rich-content.css b/libs/mep/ace1209/rich-content/rich-content.css index 21cfc6782d3..35bee3161d9 100644 --- a/libs/mep/ace1209/rich-content/rich-content.css +++ b/libs/mep/ace1209/rich-content/rich-content.css @@ -495,10 +495,13 @@ gap: var(--s2a-spacing-lg); padding-block: calc(var(--rc-media-spacing-top, var(--s2a-spacing-4xl)) + var(--rc-pull-offset)) var(--rc-media-spacing-bottom, var(--s2a-spacing-4xl)); overflow: clip; - --grid-margin-width: 0px; /* Keep unit for calc */ - @media (width >= 768px) { - --grid-margin-width: var(--grid-margin-width-base); + &.full-width { + --grid-margin-width: 0px; /* Keep unit for calc */ + + @media (width >= 768px) { + --grid-margin-width: var(--grid-margin-width-base); + } } .action-area { From 2362ffcde1e3e40767cc6f4851f394a693391558 Mon Sep 17 00:00:00 2001 From: Dusan Kosanovic Date: Wed, 16 Sep 2026 13:09:11 +0200 Subject: [PATCH 2/8] Fix invalid unscoped custom property declaration in ace1209 rich-content media query Move .rich-content.media.full-width margin overrides into top-level media queries; the previous @media (width >= 768px) block declared --grid-margin-width with no selector, so it was dropped by the parser. --- .../mep/ace1209/rich-content/rich-content.css | 35 ++++++++++++++----- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/libs/mep/ace1209/rich-content/rich-content.css b/libs/mep/ace1209/rich-content/rich-content.css index 35bee3161d9..66ef2aabcaa 100644 --- a/libs/mep/ace1209/rich-content/rich-content.css +++ b/libs/mep/ace1209/rich-content/rich-content.css @@ -496,14 +496,6 @@ padding-block: calc(var(--rc-media-spacing-top, var(--s2a-spacing-4xl)) + var(--rc-pull-offset)) var(--rc-media-spacing-bottom, var(--s2a-spacing-4xl)); overflow: clip; - &.full-width { - --grid-margin-width: 0px; /* Keep unit for calc */ - - @media (width >= 768px) { - --grid-margin-width: var(--grid-margin-width-base); - } - } - .action-area { margin-top: 0; } @@ -772,6 +764,33 @@ } } +@media (width < 1280px) { + .rich-content.media.full-width { + --grid-margin-width: 0px; + + img { + max-width: 100%; + box-sizing: border-box; + } + + .media-cell div.video-container { + border: none; + border-radius: var(--s2a-border-radius-4); + padding: unset; + + video { + aspect-ratio: 1/1; + } + } + } +} + +@media (width >= 1280px) { + .rich-content.media.full-width { + --grid-margin-width: var(--grid-margin-width-base); + } +} + @media (width >= 1920px) { .section:has(+ .section.parallax-video-garage-door .rich-content.media), .section.parallax-video-garage-door:has(.rich-content.media), From e47d7f99eab097bcc18d5958d0ae4cc0de73541c Mon Sep 17 00:00:00 2001 From: Dusan Kosanovic Date: Wed, 16 Sep 2026 13:24:18 +0200 Subject: [PATCH 3/8] Apply full-width media styling to picture as well as video-container Extend the border/radius/padding reset to picture (not just video-container) and give full-width images their own aspect-ratio and radius, matching video framing. --- libs/mep/ace1209/rich-content/rich-content.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/libs/mep/ace1209/rich-content/rich-content.css b/libs/mep/ace1209/rich-content/rich-content.css index 66ef2aabcaa..3592c3cdea3 100644 --- a/libs/mep/ace1209/rich-content/rich-content.css +++ b/libs/mep/ace1209/rich-content/rich-content.css @@ -771,14 +771,18 @@ img { max-width: 100%; box-sizing: border-box; + aspect-ratio: 1/1; + border-radius: var(--s2a-border-radius-4); } - .media-cell div.video-container { - border: none; - border-radius: var(--s2a-border-radius-4); - padding: unset; + .media-cell { + :is(picture, div.video-container) { + border: none; + border-radius: var(--s2a-border-radius-4); + padding: unset; + } - video { + div.video-container video { aspect-ratio: 1/1; } } From 5724720bb80f6b587e6a35f3d6325819a7f61149 Mon Sep 17 00:00:00 2001 From: Dusan Kosanovic Date: Wed, 16 Sep 2026 13:35:08 +0200 Subject: [PATCH 4/8] Let GWP spacing combo classes override rich-content media default padding Drop the .rich-content.media padding-block rule's specificity to zero via :where() so authored spacing-* classes (e.g. spacing-4xl) win the cascade instead of being blocked by the block's own default rule. --- libs/mep/ace1209/rich-content/rich-content.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/libs/mep/ace1209/rich-content/rich-content.css b/libs/mep/ace1209/rich-content/rich-content.css index 3592c3cdea3..4141f8433bf 100644 --- a/libs/mep/ace1209/rich-content/rich-content.css +++ b/libs/mep/ace1209/rich-content/rich-content.css @@ -487,13 +487,16 @@ } } +:where(.rich-content.media) { + padding-block: calc(var(--rc-media-spacing-top, var(--s2a-spacing-4xl)) + var(--rc-pull-offset)) var(--rc-media-spacing-bottom, var(--s2a-spacing-4xl)); +} + .rich-content.media { background: var(--s2a-color-background-inverse); display: flex; flex-direction: column; align-items: center; gap: var(--s2a-spacing-lg); - padding-block: calc(var(--rc-media-spacing-top, var(--s2a-spacing-4xl)) + var(--rc-pull-offset)) var(--rc-media-spacing-bottom, var(--s2a-spacing-4xl)); overflow: clip; .action-area { @@ -617,9 +620,11 @@ } @media (width >= 768px) { - .rich-content.media { + :where(.rich-content.media) { padding-block: var(--rc-media-spacing-top, var(--s2a-layout-sm)) var(--rc-media-spacing-bottom, var(--s2a-layout-sm)); + } + .rich-content.media { img { max-width: unset; } @@ -740,9 +745,12 @@ } @media (width >= 1024px) { + :where(.rich-content.media) { + padding-block: var(--rc-media-spacing-top, var(--s2a-layout-lg)) var(--rc-media-spacing-bottom, var(--s2a-layout-lg)); + } + .rich-content.media { gap: var(--s2a-spacing-3xl); - padding-block: var(--rc-media-spacing-top, var(--s2a-layout-lg)) var(--rc-media-spacing-bottom, var(--s2a-layout-lg)); } .rich-content.media img { From e113b21438ecfac2d59ac62941d09efbb1485a1b Mon Sep 17 00:00:00 2001 From: Dusan Kosanovic Date: Wed, 16 Sep 2026 13:56:17 +0200 Subject: [PATCH 5/8] Constrain default media picture width and drop stray video-container border on full-width Wrap media-cell images in a bordered picture frame at a fixed max-width instead of stretching to 100%, and remove the leftover border on full-width video-container images now that they render edge-to-edge. --- libs/mep/ace1209/rich-content/rich-content.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/libs/mep/ace1209/rich-content/rich-content.css b/libs/mep/ace1209/rich-content/rich-content.css index 4141f8433bf..ad0db0091ec 100644 --- a/libs/mep/ace1209/rich-content/rich-content.css +++ b/libs/mep/ace1209/rich-content/rich-content.css @@ -503,14 +503,19 @@ margin-top: 0; } - img { - border-radius: var(--s2a-border-radius-24); + picture { + border: 9px solid var(--s2a-color-transparent-white-04); + + img { + border-radius: var(--s2a-border-radius-24); + max-width: 214px; + margin: 0 auto; + } } .media-cell { position: relative; z-index: 1; - width: 100%; p { margin: 0; @@ -519,7 +524,6 @@ .video-container, picture { display: block; - width: 100%; border-radius: var(--s2a-border-radius-24); overflow: hidden; transform-origin: center bottom; @@ -781,6 +785,7 @@ box-sizing: border-box; aspect-ratio: 1/1; border-radius: var(--s2a-border-radius-4); + border: none; } .media-cell { From 8c103455c9cfd506589c5af76400d65c0a422131 Mon Sep 17 00:00:00 2001 From: Dusan Kosanovic Date: Wed, 16 Sep 2026 13:59:56 +0200 Subject: [PATCH 6/8] Remove redundant max-width from glass-border media images The parent picture/video-container already constrains width, so the 100% max-width on glass-border img/video was a no-op. --- libs/mep/ace1209/rich-content/rich-content.css | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/mep/ace1209/rich-content/rich-content.css b/libs/mep/ace1209/rich-content/rich-content.css index ad0db0091ec..7f61981e0cc 100644 --- a/libs/mep/ace1209/rich-content/rich-content.css +++ b/libs/mep/ace1209/rich-content/rich-content.css @@ -613,7 +613,6 @@ } :is(img, video) { - max-width: 100%; border-radius: var(--s2a-border-radius-4); @media (width >= 1024px) { From 9ab33ed0a0dc3a48c29c08358373bef32f73fe90 Mon Sep 17 00:00:00 2001 From: Dusan Kosanovic Date: Mon, 21 Sep 2026 12:44:05 +0200 Subject: [PATCH 7/8] update --- libs/mep/ace1209/rich-content/rich-content.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/libs/mep/ace1209/rich-content/rich-content.css b/libs/mep/ace1209/rich-content/rich-content.css index 7f61981e0cc..70005a026c2 100644 --- a/libs/mep/ace1209/rich-content/rich-content.css +++ b/libs/mep/ace1209/rich-content/rich-content.css @@ -516,6 +516,7 @@ .media-cell { position: relative; z-index: 1; + width: 100%; p { margin: 0; @@ -614,6 +615,7 @@ :is(img, video) { border-radius: var(--s2a-border-radius-4); + max-width: 100%; @media (width >= 1024px) { border-radius: var(--s2a-border-radius-8); @@ -775,7 +777,7 @@ } } -@media (width < 1280px) { +@media (width < 768px) { .rich-content.media.full-width { --grid-margin-width: 0px; @@ -801,7 +803,7 @@ } } -@media (width >= 1280px) { +@media (width >= 768px) { .rich-content.media.full-width { --grid-margin-width: var(--grid-margin-width-base); } From aad96ef209225f17b42815d96ef1da83ffd42369 Mon Sep 17 00:00:00 2001 From: Dusan Kosanovic Date: Mon, 21 Sep 2026 16:31:20 +0200 Subject: [PATCH 8/8] update --- .../mep/ace1209/rich-content/rich-content.css | 42 ++++++++++++------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/libs/mep/ace1209/rich-content/rich-content.css b/libs/mep/ace1209/rich-content/rich-content.css index 72771cb092a..40f413058a6 100644 --- a/libs/mep/ace1209/rich-content/rich-content.css +++ b/libs/mep/ace1209/rich-content/rich-content.css @@ -512,7 +512,6 @@ img { border-radius: var(--s2a-border-radius-24); - max-width: 214px; margin: 0 auto; } } @@ -619,7 +618,6 @@ :is(img, video) { border-radius: var(--s2a-border-radius-4); - max-width: 100%; @media (width >= 1024px) { border-radius: var(--s2a-border-radius-8); @@ -782,26 +780,38 @@ } @media (width < 768px) { - .rich-content.media.full-width { - --grid-margin-width: 0px; + .rich-content.media { + &:not(.full-width) { + .media-cell { + width: unset; - img { - max-width: 100%; - box-sizing: border-box; - aspect-ratio: 1/1; - border-radius: var(--s2a-border-radius-4); - border: none; + picture img { + max-width: 214px; + } + } } - .media-cell { - :is(picture, div.video-container) { - border: none; + &.full-width { + --grid-margin-width: 0px; + + img { + max-width: 100%; + box-sizing: border-box; + aspect-ratio: 1/1; border-radius: var(--s2a-border-radius-4); - padding: unset; + border: none; } - div.video-container video { - aspect-ratio: 1/1; + .media-cell { + :is(picture, div.video-container) { + border: none; + border-radius: var(--s2a-border-radius-4); + padding: unset; + } + + div.video-container video { + aspect-ratio: 1/1; + } } } }