diff --git a/libs/blocks/editorial-card/editorial-card.js b/libs/blocks/editorial-card/editorial-card.js
index 166b5c1211..931b17e8e8 100644
--- a/libs/blocks/editorial-card/editorial-card.js
+++ b/libs/blocks/editorial-card/editorial-card.js
@@ -57,14 +57,15 @@ const decorateForeground = async (el, rows) => {
   });
 };
 
-const decorateBgRow = (el, background) => {
-  decorateBlockBg(el, background);
+const decorateBgRow = (el, background, remove = false) => {
   const rows = background.querySelectorAll(':scope > div');
   const bgRowsEmpty = [...rows].every((row) => row.innerHTML.trim() === '');
-  if (bgRowsEmpty) {
+  if (bgRowsEmpty || remove) {
     el.classList.add('no-bg');
     background.remove();
+    return;
   }
+  decorateBlockBg(el, background);
 };
 
 function handleClickableCard(el) {
@@ -80,38 +81,50 @@ function handleClickableCard(el) {
 
 const init = async (el) => {
   el.classList.add('con-block');
-  if (el.className.includes('open')) {
-    el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
-  }
-  if (el.className.includes('rounded-corners')) {
-    loadStyle(`${base}/styles/rounded-corners.css`);
-  }
+  const hasOpenClass = el.className.includes('open');
+  if (hasOpenClass) el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
+  if (el.className.includes('rounded-corners')) loadStyle(`${base}/styles/rounded-corners.css`);
   if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup');
   let rows = el.querySelectorAll(':scope > div');
   const [head, middle, ...tail] = rows;
   if (rows.length === 4) el.classList.add('equal-height');
   if (rows.length >= 1) {
-    const count = rows.length >= 3 ? 'three-plus' : rows.length;
+    const count = rows.length >= 4 ? 'four-plus' : rows.length;
     switch (count) {
-      case 'three-plus':
-        // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
-        decorateBgRow(el, head);
+      case 'four-plus':
+        // 4+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
+        // 4+ rows.open (0:bg[removed], 1:media, 2:copy, ...3:static, last:card-footer)
+        decorateBgRow(el, head, hasOpenClass);
         rows = tail;
-        await decorateForeground(el, rows);
         decorateMedia(el, middle);
+        await decorateForeground(el, rows);
+        break;
+      case 3:
+        // 3 rows (0:bg, 1:media, last:copy)
+        // 3 rows.open (0:media, 1:copy, last:card-footer)
+        if (hasOpenClass) {
+          el.classList.add('no-bg');
+          rows = [middle, tail[0]];
+          decorateMedia(el, head);
+        } else {
+          rows = tail;
+          decorateBgRow(el, head);
+          decorateMedia(el, middle);
+        }
+        await decorateForeground(el, rows);
         break;
       case 2:
         // 2 rows (0:media, 1:copy)
-        rows = middle;
-        await decorateForeground(el, [rows]);
+        rows = [middle];
         decorateMedia(el, head);
         el.classList.add('no-bg');
+        await decorateForeground(el, rows);
         break;
       case 1:
         // 1 row  (0:copy)
-        rows = head;
-        await decorateForeground(el, [rows]);
+        rows = [head];
         el.classList.add('no-bg', 'no-media');
+        await decorateForeground(el, rows);
         break;
       default:
     }
diff --git a/test/blocks/editorial-card/mocks/body.html b/test/blocks/editorial-card/mocks/body.html
index 9ed3c148d5..e27494c07b 100644
--- a/test/blocks/editorial-card/mocks/body.html
+++ b/test/blocks/editorial-card/mocks/body.html
@@ -25,8 +25,8 @@ <h3 id="row---media-copy">2 Row - [media, copy]</h3>
       </div>
       <div>
         <div>
-          <video playsinline="" poster="main--milo--adobecom.hlx.page/drafts/rparrish/cards/media_146a1d94ffd4b0939df71108642d05f544e909bb0.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" muted="" data-hoverplay="" data-mouseevent="true">
-            <source src="main--milo--adobecom.hlx.page/libs/media_137656c3ef8484feb7bbc5cd88b23dd3dc31755b0.mp4" type="video/mp4">
+          <video playsinline="" poster="./" muted="" data-hoverplay="" data-mouseevent="true">
+            <source src="./" type="video/mp4">
           </video>
         </div>
       </div>
@@ -45,10 +45,7 @@ <h3 id="row---bg-media-copy">3 Row - [bg, media, copy]</h3>
       <div>
         <div>
           <picture>
-            <source type="image/webp" srcset="./media_167a2846a082544b90a92df270196720b7fd00fbc.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
-            <source type="image/webp" srcset="./media_167a2846a082544b90a92df270196720b7fd00fbc.png?width=750&amp;format=webply&amp;optimize=medium">
-            <source type="image/png" srcset="./media_167a2846a082544b90a92df270196720b7fd00fbc.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
-            <img loading="lazy" alt="" src="./media_167a2846a082544b90a92df270196720b7fd00fbc.png?width=750&amp;format=png&amp;optimize=medium" width="480" height="296">
+            <img loading="lazy" alt="" src="./" width="480" height="296">
           </picture>
         </div>
       </div>
@@ -89,12 +86,12 @@ <h2>Variants: open, click w/ lockup content</h2>
       <div>
         <div>
           <picture>
-            <img loading="lazy" alt="" src="./media.png" width="480" height="296">
+            <img loading="lazy" alt="" src="./" width="480" height="296">
           </picture>
         </div>
         <div>
           <picture>
-            <img loading="lazy" alt="" src="./media.png" width="480" height="296">
+            <img loading="lazy" alt="" src="./" width="480" height="296">
           </picture>
         </div>
         <div><a href="./media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay">https://main--milo--adobecom.hlx.page/media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay</a></div>
@@ -102,7 +99,38 @@ <h2>Variants: open, click w/ lockup content</h2>
       <div>
         <div>
           <p>
-            <picture><img loading="lazy" src="/libs/img/icons/app/aftereffects.svg"></picture>
+            <picture><img loading="lazy" src="./"></picture>
+             Lockup
+          </p>
+          <p>per-breakpoint media - mobile image, tablet image, desktop video</p>
+          <p>Open<br>'no-border', 'l-rounded-corners-image', 'static-links-copy', 'underline-links-footer'</p>
+          <h3 id="open-key-variant-per-breakpoint-media-has-footer-row">Open key-variant, PER BREAKPOINT Media, Has Footer row</h3>
+          <p>Editorial Card (static links copy) <a href="http://adobe.com/static-links">Static link</a></p>
+          <p>TODO: the footer should have its own footer-static-links variant</p>
+        </div>
+      </div>
+      <div>
+        <div data-align="justify"><strong><a href="http://adobe.com/learn">Learn More</a></strong> <em><a href="">Watch the Video</a></em> <a href="">another link</a></div>
+      </div>
+    </div>
+    <div class="editorial-card open 3-rows">
+      <div>
+        <div>
+          <picture>
+            <img loading="lazy" alt="" src="./" width="480" height="296">
+          </picture>
+        </div>
+        <div>
+          <picture>
+            <img loading="lazy" alt="" src="./" width="480" height="296">
+          </picture>
+        </div>
+        <div><a href="./media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay">https://main--milo--adobecom.hlx.page/media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay</a></div>
+      </div>
+      <div>
+        <div>
+          <p>
+            <picture><img loading="lazy" src="./"></picture>
              Lockup
           </p>
           <p>per-breakpoint media - mobile image, tablet image, desktop video</p>
@@ -125,7 +153,7 @@ <h2>Empty footer row and extra static row</h2>
       <div>
         <div>
           <picture>
-            <img loading="lazy" alt="" src="./media.png" width="480" height="296">
+            <img loading="lazy" alt="" src="./" width="480" height="296">
           </picture>
         </div>
       </div>