From d90dcc060835ab1b59b0cb4e96dbbc45a69f1d4f Mon Sep 17 00:00:00 2001
From: Elan Bartholomew <79870969+elan-tbx@users.noreply.github.com>
Date: Thu, 22 Aug 2024 00:29:40 -0600
Subject: [PATCH] Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux)"
 (#2777)

Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux) (#2767)"

This reverts commit 88cb1010512d247531a75bfef6bdc174a2b957b7.
---
 libs/blocks/aside/aside.css            | 309 +++++--------
 libs/blocks/aside/aside.js             |  31 +-
 libs/styles/iconography.css            |  71 +--
 test/blocks/aside/aside-legacy.test.js | 116 -----
 test/blocks/aside/aside.test.js        | 259 +++++------
 test/blocks/aside/mocks/body.html      | 587 +++++++++++++++++++++++++
 test/blocks/aside/mocks/split.html     | 114 -----
 test/blocks/aside/mocks/standard.html  |  97 ----
 8 files changed, 840 insertions(+), 744 deletions(-)
 delete mode 100644 test/blocks/aside/aside-legacy.test.js
 delete mode 100644 test/blocks/aside/mocks/split.html
 delete mode 100644 test/blocks/aside/mocks/standard.html

diff --git a/libs/blocks/aside/aside.css b/libs/blocks/aside/aside.css
index 10dfec002c..c0ad710b34 100644
--- a/libs/blocks/aside/aside.css
+++ b/libs/blocks/aside/aside.css
@@ -16,36 +16,6 @@
   margin: 0;
 }
 
-.aside [class^="heading-"]:only-of-type,
-.aside [class^="heading-"]:last-of-type {
-  margin-bottom: var(--spacing-xs);
-}
-
-.aside:is(.promobar, .notification.extra-small, .notification.small) [class^="heading-"]:is(:only-of-type, :last-of-type) {
-  margin-bottom: 0;
-}
-
-.aside [class^="body-"] {
-  margin-bottom: var(--spacing-s);
-}
-
-.aside.promobar [class^="body-"],
-.aside.notification.extra-small [class^="body-"] {
-  margin-bottom: 0;
-}
-
-.aside [class^="detail-"] {
-  margin-bottom: var(--spacing-xs);
-}
-
-.aside .title-l {
-  font-size: var(--type-body-m-size);
-  line-height: var(--type-body-m-lh);
-  font-weight: bold;
-  text-transform: none;
-  margin-bottom: var(--spacing-xs);
-}
-
 .aside.split picture {
   display: flex;
 }
@@ -68,9 +38,15 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  gap: var(--spacing-m);
-  padding: var(--spacing-xl) 0;
-  box-sizing: border-box;
+  gap: var(--spacing-l);
+}
+
+.aside:not(.notification):not(.inline) .foreground > :first-child {
+  padding: var(--spacing-xxxl) 0 0;
+}
+
+.aside:not(.notification):not(.inline) .foreground > :last-child {
+  margin-bottom: var(--spacing-xxxl);
 }
 
 .aside .foreground.container .text {
@@ -81,16 +57,7 @@
 .aside.split .foreground.container .text {
   margin: 0;
   max-width: var(--grid-container-width);
-}
-
-.aside.media-top-mobile .foreground .image,
-.aside.media-top-mobile .split-image {
-  order: -1;
-}
-
-.aside.media-bottom-mobile .foreground .image,
-.aside.media-bottom-mobile .split-image {
-  order: 1;
+  padding: var(--spacing-xxxl) 0 var(--spacing-l) 0;
 }
 
 .aside.simple .foreground.container .text {
@@ -118,9 +85,13 @@
   flex-basis: 100%;
 }
 
-.aside.split .icon-stack-area li {
-  width: fit-content;
-  min-width: calc(50% - 6px);
+.aside.inline .foreground.container .image,
+.aside.inline .foreground.container .text {
+  padding: 0;
+}
+
+.aside.split.large .foreground.container .text {
+  padding: var(--spacing-l) 0 var(--spacing-xxxl) 0;
 }
 
 .aside.split .icon-stack-area li,
@@ -139,12 +110,18 @@
   width: 100%;
 }
 
+.aside .foreground.container .text .heading-xl {
+  margin: 0 0 var(--spacing-xs);
+}
+
+.aside .foreground.container .text .body-m,
+.aside .foreground.container .text .body-s {
+  margin-bottom: var(--spacing-s);
+}
+
 .aside .foreground.container .text .supplemental-text {
-  margin-top: var(--spacing-s);
+  padding-top: var(--spacing-s);
   margin-bottom: 0;
-  font-size: var(--type-body-s-size);
-  line-height: var(--type-body-s-lh);
-  font-weight: bold;
 }
 
 .aside.promobar .promo-text .action-area {
@@ -167,13 +144,9 @@
 }
 
 .aside .foreground.container .icon-area {
-  max-height: 80px;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  line-height: 0;
+  height: 56px;
+  max-width: 234px;
   margin-bottom: var(--spacing-s);
-  font-weight: bold;
 }
 
 .aside .foreground.container a.icon-area {
@@ -181,15 +154,6 @@
   margin-bottom: 0;
 }
 
-.aside.center .foreground.container .icon-area {
-  justify-content: center;
-}
-
-.aside .avatar-area,
-.aside .lockup-area {
-  margin-bottom: var(--spacing-s);
-}
-
 .aside.split .split-image img,
 .aside.split .split-image video {
   position: relative;
@@ -232,16 +196,9 @@
   align-items: center;
 }
 
-.aside.split .icon-stack-area li picture {
-  flex-shrink: 0;
-}
-
-.aside .foreground.container .icon-area picture {
-  height: 100%;
-}
-
 .aside .foreground.container .icon-area img {
-  max-height: 100%;
+  max-width: 234px;
+  height: var(--icon-size-l);
   width: auto;
   object-fit: cover;
   object-position: left top;
@@ -259,11 +216,6 @@
   flex-direction: column-reverse;
 }
 
-.aside.split.large.aside.media-top-mobile,
-.aside.split.large.aside.media-bottom-mobile {
-  flex-direction: column;
-}
-
 .aside.split .foreground.container {
   width: 100%;
   max-width: 100%;
@@ -284,6 +236,10 @@
   display: none;
 }
 
+.aside.split .icon-stack-area li picture {
+  flex-shrink: 0;
+}
+
 .aside.notification .text [class^="heading-"] + .action-area {
   margin-top: var(--spacing-xs);
 }
@@ -292,11 +248,6 @@
   display: block;
 }
 
-.aside.rounded-corners .foreground .image img,
-.aside.rounded-corners .foreground .image video {
-  border-radius: 16px;
-}
-
 .aside .foreground.container .image video,
 .aside .foreground.container .image picture,
 .aside .foreground.container .image picture img {
@@ -371,7 +322,6 @@
 
 .aside.promobar .foreground.container .icon-area img {
   height: var(--icon-size-m);
-  max-width: 234px;
 }
 
 .aside.notification.extra-small .foreground.container a:last-child {
@@ -493,10 +443,6 @@
   padding: 0;
 }
 
-.aside.no-media:not(.notification) .foreground.container {
-  gap: 0;
-}
-
 .aside.notification.large.center .foreground.container,
 .aside.notification.large .foreground.container.no-image {
   max-width: 800px;
@@ -520,6 +466,7 @@
 .aside.split .icon-stack-area {
   display: flex;
   flex-flow: row wrap;
+  flex-direction: column;
   gap: 12px;
   margin: -8px 0 var(--spacing-s);
   width: 100%;
@@ -543,6 +490,10 @@
   justify-content: center;
 }
 
+.aside:not(.notification) .foreground.container .text .detail-m {
+  margin-bottom: var(--spacing-xs);
+}
+
 .aside.split .image.format {
   display: flex;
 }
@@ -551,6 +502,16 @@
   display: none;
 }
 
+.aside.center:not(.notification) .foreground.container .text .icon-area {
+  height: var(--icon-size-xxl);
+}
+
+.aside.center:not(.notification) .foreground.container .text .icon-area img {
+  height: var(--icon-size-xxl);
+  max-width: 300px;
+  width: auto;
+}
+
 .aside.promobar .foreground.container > :first-child {
   padding: var(--spacing-xs) 0;
 }
@@ -650,29 +611,47 @@
   stroke: var(--color-white);
 }
 
-.aside.promobar.popup .mobile-up.hide-block ~ .promo-close {
-  display: none;
+@media screen and (max-width: 600px) {
+  .aside.no-media:not(.notification) .foreground.container {
+    gap: 0;
+  }
+
+  .aside.split.no-media:not(.notification) .foreground.container .text {
+    padding: var(--spacing-xxxl) 0;
+  }
+
+  .aside.promobar.popup .mobile-up.hide-block ~ .promo-close {
+    display: none;
+  }
 }
 
 @media screen and (min-width: 600px) {
-  .aside.media-top-mobile .foreground .image,
-  .aside.media-top-mobile .split-image {
-    order: unset;
+  .aside.small {
+    min-height: 420px;
   }
 
-  .aside.media-bottom-mobile .foreground .image,
-  .aside.media-bottom-mobile .split-image {
-    order: unset;
+  .aside.medium {
+    min-height: 560px;
   }
 
-  .aside.promobar.popup .mobile-up.hide-block ~ .promo-close {
-    display: unset;
+  .aside.large {
+    min-height: 700px;
   }
 
   .aside .foreground.container {
     align-items: center;
     flex-direction: row;
     margin: 0 auto;
+    padding: var(--spacing-m) 0;
+    gap: var(--spacing-xl);
+  }
+
+  .aside:not(.notification):not(.inline) .foreground.container > :first-child {
+    padding: 0;
+  }
+
+  .aside:not(.notification):not(.inline):not(.center) .foreground.container > :last-child {
+    margin-bottom: 0;
   }
 
   .aside .foreground.container .image {
@@ -695,6 +674,7 @@
 
   .aside .foreground.container .text {
     margin-bottom: 0;
+    padding-right: var(--spacing-s);
   }
 
   .aside.split-right .foreground.container .text {
@@ -707,6 +687,15 @@
     padding-right: 0;
   }
 
+  .aside.split .split-image {
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
   .aside.split .tablet-wide img,
   .aside.split .tablet-wide video {
     aspect-ratio: var(--aspect-ratio-wide);
@@ -729,7 +718,8 @@
   .aside .split-image .modal-img-link,
   .aside.split .split-image img,
   .aside.split .split-image video {
-    width: 50vw;
+    width: 60.5vw;
+    max-width: 56%;
     position: absolute;
     right: 0;
     object-fit: cover;
@@ -777,7 +767,8 @@
   }
 
   .aside.split .foreground.container .text {
-    flex: 0 0 41.67%;
+    flex: 0 0 31vw;
+    padding: var(--spacing-xxl) 0;
     max-width: 100%;
     margin: 0;
   }
@@ -804,7 +795,7 @@
     flex-grow: 1;
   }
 
-  .aside.notification.small [class^="body-"] {
+  .aside.notification.small .foreground.container .text .body-m {
     margin: 0;
   }
 
@@ -888,6 +879,10 @@
     height: 40px;
   }
 
+  .aside.center:not(.notification) .foreground.container .text .icon-area img {
+    max-width: 234px;
+  }
+
   .aside.medium.split.bio .foreground.container .text .icon-area,
   .aside.large.split.bio .foreground.container .text .icon-area {
     height: var(--icon-size-xxl);
@@ -927,84 +922,16 @@
   }
 }
 
-@media (min-width: 600px) and (max-width: 1199px) {
+@media (min-width: 600px) and (max-width: 1200px) {
   .aside.promobar.popup .tablet-up.hide-block ~ .promo-close {
     display: none;
   }
-
-  .aside.media-top-tablet .foreground.container,
-  .aside.media-bottom-tablet .foreground.container {
-    justify-content: center;
-    flex-direction: column;
-    gap: var(--spacing-l);
-    padding: var(--spacing-xl) 0;
-  }
-
-  .aside.media-top-tablet .foreground.container .text,
-  .aside.media-bottom-tablet .foreground.container .text {
-    padding-right: 0;
-  }
-
-  .aside.media-top-tablet .foreground .image,
-  .aside.split.media-top-tablet .split-image {
-    order: -1;
-  }
-
-  .aside.media-bottom-tablet .foreground .image,
-  .aside.split.media-bottom-tablet .split-image {
-    order: 100;
-  }
-
-  .aside.large.media-top-tablet,
-  .aside.large.media-bottom-tablet {
-    min-height: auto;
-  }
-
-  .aside.split.large.media-top-tablet .foreground.container .text,
-  .aside.split.large.media-bottom-tablet .foreground.container .text {
-    padding: 0;
-    flex: 0 0 100%;
-  }
-
-  .aside.split.media-top-tablet .split-image,
-  .aside.split.media-bottom-tablet .split-image {
-    position: relative;
-  }
-
-  .aside.split.media-top-tablet .split-image img,
-  .aside.split.media-bottom-tablet .split-image img {
-    position: relative;
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .aside.split.media-top-tablet .text .icon-stack-area,
-  .aside.split.media-bottom-tablet .text .icon-stack-area {
-    width: 83.33%;
-  }
-
-  .aside.split.media-top-tablet .icon-stack-area li,
-  .aside.split.media-bottom-tablet .icon-stack-area li {
-    width: calc(50% - 6px);
-  }
 }
 
 @media screen and (min-width: 1200px) {
-  .aside.small {
-    min-height: 420px;
-  }
-
-  .aside.medium {
-    min-height: 560px;
-  }
-
-  .aside.large {
-    min-height: 700px;
-  }
-
   .aside .foreground.container {
+    min-height: 420px;
     width: var(--grid-container-width);
-    gap: var(--grid-column-width);
   }
 
   .aside .foreground.container > div {
@@ -1012,12 +939,16 @@
     padding-left: 0;
   }
 
-  .aside:not(.notification) .foreground.container .text {
-    flex: 1 0 calc(var(--grid-column-width) * 6);
+  .aside .foreground.container .text {
+    padding: var(--spacing-xxl) 0;
   }
 
-  .aside:not(.notification) .foreground.container .image {
-    flex: 1 0 calc(var(--grid-column-width) * 5);
+  .aside .foreground.container .icon-area {
+    max-width: 400px;
+  }
+
+  .aside .foreground.container .text .heading-xl {
+    margin: 0 0 var(--spacing-xs);
   }
 
   .aside.inline .foreground.container .text {
@@ -1030,7 +961,7 @@
   }
 
   .aside.split .foreground.container .text {
-    flex: 0 0 29%;
+    flex: 0 0 300px;
   }
 
   .aside.split .foreground.container .image {
@@ -1039,12 +970,6 @@
     object-fit: cover;
   }
 
-  .aside .split-image .modal-img-link,
-  .aside.split .split-image img,
-  .aside.split .split-image video {
-    width: 60.5vw;
-  }
-
   .aside.split .split-image img,
   .aside.split .split-image video {
     max-width: 1396px;
@@ -1074,8 +999,14 @@
     flex: 0 0 calc(36% - var(--spacing-s));
   }
 
+  .aside.split.icon-stack .foreground.container .text,
+  .aside.split.bio .foreground.container .text {
+    padding: var(--spacing-xxl) 0;
+  }
+
   .aside.split .icon-stack-area li {
-    width: calc(50% - 6px);
+    max-width: calc(50% - 6px);
+    min-width: calc(50% - 6px);
   }
 
   .aside.split .icon-stack-area {
@@ -1092,6 +1023,10 @@
     height: var(--icon-size-m);
   }
 
+  .aside.center:not(.notification) .foreground.container .text .icon-area img {
+    max-width: 400px;
+  }
+
   .aside.center:not(.notification) .foreground.container .text {
     max-width: 50%;
   }
@@ -1204,9 +1139,3 @@
     margin-top: 0;
   }
 }
-
-@media screen and (min-width: 1440px) {
-  .aside.split .foreground.container .text {
-    flex: 0 0 calc(500px - 10.5vw);
-  }
-}
diff --git a/libs/blocks/aside/aside.js b/libs/blocks/aside/aside.js
index 6c7fcc02cd..dde3602f8c 100644
--- a/libs/blocks/aside/aside.js
+++ b/libs/blocks/aside/aside.js
@@ -14,8 +14,8 @@
 * Aside - v5.1
 */
 
-import { decorateBlockText, decorateIconStack, applyHoverPlay, decorateBlockBg, decorateTextOverrides } from '../../utils/decorate.js';
-import { createTag, getConfig, loadStyle } from '../../utils/utils.js';
+import { decorateBlockText, decorateIconStack, applyHoverPlay, decorateBlockBg } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
 
 // standard/default aside uses same text sizes as the split
 const variants = ['split', 'inline', 'notification'];
@@ -163,13 +163,7 @@ function decoratePromobar(el) {
   return foreground;
 }
 
-async function loadIconography() {
-  const { miloLibs, codeRoot } = getConfig();
-  const base = miloLibs || codeRoot;
-  await new Promise((resolve) => { loadStyle(`${base}/styles/iconography.css`, resolve); });
-}
-
-async function decorateLayout(el) {
+function decorateLayout(el) {
   const elems = el.querySelectorAll(':scope > div');
   if (elems.length > 1) {
     decorateBlockBg(el, elems[0]);
@@ -188,12 +182,7 @@ async function decorateLayout(el) {
   }
   const picture = text?.querySelector('p picture');
   const iconArea = picture ? (picture.closest('p') || createTag('p', null, picture)) : null;
-  if (iconArea) {
-    const iconVariant = el.className.match(/-(avatar|lockup)/);
-    const iconClass = iconVariant ? `${iconVariant[1]}-area` : 'icon-area';
-    if (iconVariant) await loadIconography();
-    iconArea.classList.add(iconClass);
-  }
+  iconArea?.classList.add('icon-area');
   const foregroundImage = foreground.querySelector(':scope > div:not(.text) img')?.closest('div');
   const bgImage = el.querySelector(':scope > div:not(.text):not(.foreground) img')?.closest('div');
   const foregroundMedia = foreground.querySelector(':scope > div:not(.text) video, :scope > div:not(.text) a[href*=".mp4"]')?.closest('div');
@@ -213,18 +202,18 @@ async function decorateLayout(el) {
   } else if (!iconArea) {
     foreground?.classList.add('no-image');
   }
-  if (el.classList.contains('split')) decorateIconStack(el);
+  if (el.classList.contains('split')
+      && (el.classList.contains('medium') || el.classList.contains('large'))) {
+    decorateIconStack(el);
+  }
   return foreground;
 }
 
-export default async function init(el) {
+export default function init(el) {
   el.classList.add('con-block');
   const blockData = getBlockData(el);
-  const blockText = await decorateLayout(el);
+  const blockText = decorateLayout(el);
   decorateBlockText(blockText, blockData);
   decorateStaticLinks(el);
   formatPromoButton(el);
-  decorateTextOverrides(el);
-  // Override Detail with Title L style if class exists - Temporary solution until Spectrum 2
-  if (el.classList.contains('l-title')) el.querySelector('[class*="detail-"]')?.classList.add('title-l');
 }
diff --git a/libs/styles/iconography.css b/libs/styles/iconography.css
index 83ca16ac01..acee064c00 100644
--- a/libs/styles/iconography.css
+++ b/libs/styles/iconography.css
@@ -1,40 +1,28 @@
-/* iconography.css
+/* iconograph.css
 This is consonant shared design patterns 
 dealing w/ groups of media and associated text 
 - lockup
+(coming soon...)
 - avatar
 */
 
 :root {
-  /* lockup sizes */
-  --type-lockup-all-weight: 700;
-  --type-lockup-xxl-size: 55px;
-  --type-lockup-xxl-ls: -0.01em;
-  --type-lockup-xl-size: 44px;
-  --type-lockup-xl-ls: -0.01em;
-  --type-lockup-l-size: 38px;
-  --type-lockup-l-ls: -0.01em;
-  --type-lockup-m-size: 27px;
-  --type-lockup-m-ls: -0.02em;
-  --type-lockup-s-size: 22px;
-  --type-lockup-s-ls: -0.02em;
-  --type-lockup-xs-size: 16px;
-  --type-lockup-xs-ls: 0;
-  --type-lockup-xxs-size: 11px;
-  --type-lockup-xxs-ls: -0.01em;
-
-  /* avatar sizes */
-  --avatar-size-xxl: 64px;
-  --avatar-size-xl: 56px;
-  --avatar-size-l: 40px;
-}
-
-@media (min-width: 1200px) {
-  :root {
-    --avatar-size-xxl: 80px;
-    --avatar-size-xl: 64px;
-    --avatar-size-l: 56px;
-  }
+    /* lockup sizes */
+    --type-lockup-all-weight: 700;
+    --type-lockup-xxl-size: 55px;
+    --type-lockup-xxl-ls: -0.01em;
+    --type-lockup-xl-size: 44px;
+    --type-lockup-xl-ls: -0.01em;
+    --type-lockup-l-size: 38px;
+    --type-lockup-l-ls: -0.01em;
+    --type-lockup-m-size: 27px;
+    --type-lockup-m-ls: -0.02em;
+    --type-lockup-s-size: 22px;
+    --type-lockup-s-ls: -0.02em;
+    --type-lockup-xs-size: 16px;
+    --type-lockup-xs-ls: 0;
+    --type-lockup-xxs-size: 11px;
+    --type-lockup-xxs-ls: -0.01em;
 }
 
 /* Lockup */
@@ -102,26 +90,3 @@ dealing w/ groups of media and associated text
 .l-lockup .lockup-area img { height: var(--icon-size-l); }
 .xl-lockup .lockup-area img { height: var(--icon-size-xl); }
 .xxl-lockup .lockup-area img { height: var(--icon-size-xxl); }
-
-.avatar-area {
-  line-height: 0;
-  margin-bottom: var(--spacing-s);
-}
-
-.l-avatar .avatar-area img {
-  border-radius: 50%;
-  height: var(--avatar-size-l);
-  width: var(--avatar-size-l);
-}
-
-.xl-avatar .avatar-area img {
-  border-radius: 50%;
-  height: var(--avatar-size-xl);
-  width: var(--avatar-size-xl);
-}
-
-.xxl-avatar .avatar-area img {
-  border-radius: 50%;
-  height: var(--avatar-size-xxl);
-  width: var(--avatar-size-xxl);
-}
diff --git a/test/blocks/aside/aside-legacy.test.js b/test/blocks/aside/aside-legacy.test.js
deleted file mode 100644
index 66e017582b..0000000000
--- a/test/blocks/aside/aside-legacy.test.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { readFile } from '@web/test-runner-commands';
-import { expect } from '@esm-bundle/chai';
-
-document.body.innerHTML = await readFile({ path: './mocks/body.html' });
-const { default: init } = await import('../../../libs/blocks/aside/aside.js');
-
-const types = ['simple', 'split', 'inline', 'notification', 'promobar'];
-
-describe('aside', () => {
-  const asides = document.querySelectorAll('.aside');
-  asides.forEach((aside) => {
-    init(aside);
-
-    const typeIndex = types.findIndex((v) => aside.classList.contains(v));
-    const type = typeIndex >= 0 ? types[typeIndex] : 'default';
-
-    describe(`aside ${type}`, () => {
-      const isInline = type === 'inline';
-
-      if (type !== 'notification') {
-        it('has a heading', () => {
-          const heading = aside.querySelector('[class^=heading-]');
-          expect(heading).to.exist;
-        });
-
-        it('icon has a wrapper', () => {
-          const icon = aside.querySelector('.text picture, .promo-text picture');
-          if (icon) {
-            expect(icon.closest('.icon-area')).to.exist;
-          }
-        });
-
-        it('has a body', () => {
-          const body = aside.querySelector('[class^=body-]');
-          expect(body).to.exist;
-        });
-
-        it('button has a wrapper', () => {
-          const button = aside.querySelector('.text .con-button, .promo-text .con-button');
-          if (button) {
-            expect(button.closest('p')).to.exist;
-          }
-        });
-
-        if (aside.classList.contains('icon-stack')) {
-          it('Has icon stack area', () => {
-            const iconStack = aside.querySelector('ul.icon-stack-area');
-            expect(iconStack).to.exist;
-          });
-        }
-
-        if (aside.classList.contains('aspect-ratio')) {
-          it('Has aspect ratio set', () => {
-            let aspectRatios = '';
-            if (aside.classList.contains('aspect-ratio-three')) {
-              aspectRatios = aside.querySelector('.mobile-square.tablet-standard.desktop-wide');
-              expect(aspectRatios).to.exist;
-            } else if (aside.classList.contains('aspect-ratio-two')) {
-              aspectRatios = aside.querySelector('.mobile-standard.tablet-wide');
-              expect(aspectRatios).to.exist;
-            } else if (aside.classList.contains('aspect-ratio-one')) {
-              aspectRatios = aside.querySelector('.mobile-standard');
-              expect(aspectRatios).to.exist;
-            }
-          });
-        }
-      }
-
-      if (type === 'default' || type === isInline) {
-        it('has an image', () => {
-          const image = aside.querySelector('.image');
-          expect(image).to.exist;
-        });
-      }
-
-      if (type === types[1]) {
-        it('has a background image or video', () => {
-          const body = aside.querySelector('.split-image');
-          expect(body).to.exist;
-        });
-      }
-
-      if (type === 'promobar') {
-        it('has viewport content', () => {
-          const viewportContent = aside.querySelectorAll('.promo-text');
-          expect(viewportContent.length).to.equal(3);
-        });
-
-        if (aside.classList.contains('popup')) {
-          it('has promo close button', () => {
-            const closeBtn = aside.querySelector('.promo-close');
-            expect(closeBtn).to.exist;
-          });
-
-          if (aside.classList.contains('mobile-promo-only')) {
-            it('has empty tablet block hidden', () => {
-              const tabletBlock = aside.querySelector('.tablet-up.hide-block');
-              expect(tabletBlock).to.exist;
-            });
-
-            it('has empty desktop block hidden', () => {
-              const desktopBlock = aside.querySelector('.tablet-up.hide-block');
-              expect(desktopBlock).to.exist;
-            });
-          }
-
-          it('close button click closes the popup', () => {
-            const closeBtn = aside.querySelector('.promo-close');
-            closeBtn.click();
-            expect(aside.closest('.section').classList.contains('close-sticky-section')).to.be.true;
-          });
-        }
-      }
-    });
-  });
-});
diff --git a/test/blocks/aside/aside.test.js b/test/blocks/aside/aside.test.js
index d0793c430b..66e017582b 100644
--- a/test/blocks/aside/aside.test.js
+++ b/test/blocks/aside/aside.test.js
@@ -1,163 +1,116 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
-import { waitForElement } from '../../helpers/waitfor.js';
-import { setConfig } from '../../../libs/utils/utils.js';
 
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/aside/aside.js');
-const standardBody = await readFile({ path: './mocks/standard.html' });
-const splitBody = await readFile({ path: './mocks/split.html' });
-const conf = { miloLibs: 'http://localhost:2000/libs' };
 
-setConfig(conf);
+const types = ['simple', 'split', 'inline', 'notification', 'promobar'];
 
 describe('aside', () => {
-  describe('standard', () => {
-    before(() => {
-      document.body.innerHTML = standardBody;
-      const blocks = document.querySelectorAll('.aside');
-      blocks.forEach((el) => init(el));
-    });
-
-    it('allows a background color', async () => {
-      const el = await waitForElement('#test-default');
-      expect(window.getComputedStyle(el)?.backgroundColor).to.equal('rgb(238, 238, 238)');
-    });
-
-    it('allows a background image', async () => {
-      const el = await waitForElement('#test-default-2 .background img');
-      expect(el).to.exist;
-    });
-
-    it('allows an icon image', async () => {
-      const el = await waitForElement('#test-default .icon-area img');
-      expect(el).to.exist;
-    });
-
-    it('has Detail M by default', async () => {
-      const el = await waitForElement('#test-default .detail-m');
-      expect(el).to.exist;
-    });
-
-    it('has Heading XL by default', async () => {
-      const el = await waitForElement('#test-default .heading-xl');
-      expect(el).to.exist;
-    });
-
-    it('has Body S by default', async () => {
-      const el = await waitForElement('#test-default p.body-s');
-      expect(el).to.exist;
-    });
-
-    it('allows a cta', async () => {
-      const el = await waitForElement('#test-default .action-area .con-button');
-      expect(el).to.exist;
-    });
-
-    it('allows supplemental text', async () => {
-      const el = await waitForElement('#test-default .supplemental-text');
-      expect(el).to.exist;
-    });
-
-    it('allows a foreground image', async () => {
-      const el = await waitForElement('#test-default .foreground .image img');
-      expect(el).to.exist;
-    });
-
-    it('allows text overrides', async () => {
-      const el = await waitForElement('#test-text-overrides');
-      expect(el.querySelector('.detail-l')).to.exist;
-      expect(el.querySelector('.heading-l')).to.exist;
-      expect(el.querySelector('p.body-m')).to.exist;
-    });
-
-    it('allows Title L to override Detail', async () => {
-      const el = await waitForElement('#test-title .detail-m.title-l');
-      expect(el).to.exist;
-    });
-
-    it('allows an avatar', async () => {
-      const el = await waitForElement('#test-avatar .avatar-area img');
-      expect(el).to.exist;
-    });
-
-    it('allows a product lockup', async () => {
-      const el = await waitForElement('#test-lockup .lockup-area img');
-      expect(el).to.exist;
-    });
-  });
-
-  describe('split', () => {
-    before(() => {
-      document.body.innerHTML = splitBody;
-      const blocks = document.querySelectorAll('.aside');
-      blocks.forEach((el) => init(el));
-    });
-
-    it('allows a background color', async () => {
-      const el = await waitForElement('#test-default');
-      expect(window.getComputedStyle(el)?.backgroundColor).to.equal('rgb(30, 30, 30)');
-    });
-
-    it('allows an icon image', async () => {
-      const el = await waitForElement('#test-default .icon-area img');
-      expect(el).to.exist;
-    });
-
-    it('has Detail M by default', async () => {
-      const el = await waitForElement('#test-default .detail-m');
-      expect(el).to.exist;
-    });
-
-    it('has Heading XL by default', async () => {
-      const el = await waitForElement('#test-default .heading-xl');
-      expect(el).to.exist;
-    });
-
-    it('has Body S by default', async () => {
-      const el = await waitForElement('#test-default p.body-s');
-      expect(el).to.exist;
-    });
-
-    it('allows icon stack', async () => {
-      const el = await waitForElement('#test-default .icon-stack-area');
-      expect(el).to.exist;
-    });
-
-    it('allows a cta', async () => {
-      const el = await waitForElement('#test-default .action-area .con-button');
-      expect(el).to.exist;
-    });
-
-    it('allows supplemental text', async () => {
-      const el = await waitForElement('#test-default .supplemental-text');
-      expect(el).to.exist;
-    });
-
-    it('allows a split image', async () => {
-      const el = await waitForElement('#test-default .split-image img');
-      expect(el).to.exist;
-    });
-
-    it('allows text overrides', async () => {
-      const el = await waitForElement('#test-text-overrides');
-      expect(el.querySelector('.detail-l')).to.exist;
-      expect(el.querySelector('.heading-l')).to.exist;
-      expect(el.querySelector('p.body-m')).to.exist;
-    });
-
-    it('allows Title L to override Detail', async () => {
-      const el = await waitForElement('#test-title .detail-m.title-l');
-      expect(el).to.exist;
-    });
-
-    it('allows an avatar', async () => {
-      const el = await waitForElement('#test-avatar .avatar-area img');
-      expect(el).to.exist;
-    });
-
-    it('allows a product lockup', async () => {
-      const el = await waitForElement('#test-lockup .lockup-area img');
-      expect(el).to.exist;
+  const asides = document.querySelectorAll('.aside');
+  asides.forEach((aside) => {
+    init(aside);
+
+    const typeIndex = types.findIndex((v) => aside.classList.contains(v));
+    const type = typeIndex >= 0 ? types[typeIndex] : 'default';
+
+    describe(`aside ${type}`, () => {
+      const isInline = type === 'inline';
+
+      if (type !== 'notification') {
+        it('has a heading', () => {
+          const heading = aside.querySelector('[class^=heading-]');
+          expect(heading).to.exist;
+        });
+
+        it('icon has a wrapper', () => {
+          const icon = aside.querySelector('.text picture, .promo-text picture');
+          if (icon) {
+            expect(icon.closest('.icon-area')).to.exist;
+          }
+        });
+
+        it('has a body', () => {
+          const body = aside.querySelector('[class^=body-]');
+          expect(body).to.exist;
+        });
+
+        it('button has a wrapper', () => {
+          const button = aside.querySelector('.text .con-button, .promo-text .con-button');
+          if (button) {
+            expect(button.closest('p')).to.exist;
+          }
+        });
+
+        if (aside.classList.contains('icon-stack')) {
+          it('Has icon stack area', () => {
+            const iconStack = aside.querySelector('ul.icon-stack-area');
+            expect(iconStack).to.exist;
+          });
+        }
+
+        if (aside.classList.contains('aspect-ratio')) {
+          it('Has aspect ratio set', () => {
+            let aspectRatios = '';
+            if (aside.classList.contains('aspect-ratio-three')) {
+              aspectRatios = aside.querySelector('.mobile-square.tablet-standard.desktop-wide');
+              expect(aspectRatios).to.exist;
+            } else if (aside.classList.contains('aspect-ratio-two')) {
+              aspectRatios = aside.querySelector('.mobile-standard.tablet-wide');
+              expect(aspectRatios).to.exist;
+            } else if (aside.classList.contains('aspect-ratio-one')) {
+              aspectRatios = aside.querySelector('.mobile-standard');
+              expect(aspectRatios).to.exist;
+            }
+          });
+        }
+      }
+
+      if (type === 'default' || type === isInline) {
+        it('has an image', () => {
+          const image = aside.querySelector('.image');
+          expect(image).to.exist;
+        });
+      }
+
+      if (type === types[1]) {
+        it('has a background image or video', () => {
+          const body = aside.querySelector('.split-image');
+          expect(body).to.exist;
+        });
+      }
+
+      if (type === 'promobar') {
+        it('has viewport content', () => {
+          const viewportContent = aside.querySelectorAll('.promo-text');
+          expect(viewportContent.length).to.equal(3);
+        });
+
+        if (aside.classList.contains('popup')) {
+          it('has promo close button', () => {
+            const closeBtn = aside.querySelector('.promo-close');
+            expect(closeBtn).to.exist;
+          });
+
+          if (aside.classList.contains('mobile-promo-only')) {
+            it('has empty tablet block hidden', () => {
+              const tabletBlock = aside.querySelector('.tablet-up.hide-block');
+              expect(tabletBlock).to.exist;
+            });
+
+            it('has empty desktop block hidden', () => {
+              const desktopBlock = aside.querySelector('.tablet-up.hide-block');
+              expect(desktopBlock).to.exist;
+            });
+          }
+
+          it('close button click closes the popup', () => {
+            const closeBtn = aside.querySelector('.promo-close');
+            closeBtn.click();
+            expect(aside.closest('.section').classList.contains('close-sticky-section')).to.be.true;
+          });
+        }
+      }
     });
   });
 });
diff --git a/test/blocks/aside/mocks/body.html b/test/blocks/aside/mocks/body.html
index b41014fd38..3ac00c2d9b 100644
--- a/test/blocks/aside/mocks/body.html
+++ b/test/blocks/aside/mocks/body.html
@@ -3,6 +3,88 @@
   data-section-status="loaded">
   <div>
     <h1 id="aside">Aside</h1>
+    <h4 id="standard---small">Standard - Small</h4>
+    <div class="aside--small- aside small block" data-block-name="aside" data-block-status="loaded">
+      <div>
+        <div>#f9f9f9</div>
+        <div>#f9f9f9</div>
+      </div>
+      <div>
+        <div>
+          <p>{{icon-illustrator}}</p>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-aside-standard-small-two-lines">Heading XL Aside standard small two lines</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna.</p>
+          <p><strong><a href="https://www.hlx.live/" target="_blank">Learn More</a></strong></p>
+        </div>
+        <div>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img src="" alt="" loading="eager">
+          </picture>
+        </div>
+      </div>
+    </div>
+    <h4 id="standard---medium">Standard - Medium</h4>
+    <div class="aside--medium- aside medium block" data-block-name="aside" data-block-status="loaded">
+      <div>
+        <div><strong>Vital Ocean</strong></div>
+      </div>
+      <div>
+        <div>
+          <p>{{icon-illustrator}}</p>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-aside-standard-medium-three-lines-lorem-ipsum-dolor-sit-amet">Heading XL Aside
+            standard medium three lines Lorem ipsum dolor sit amet.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+            ullamco laboris nisi ut.</p>
+          <p><strong><a href="https://www.hlx.live/" target="_blank">Learn More</a></strong> <em><a
+                href="https://www.hlx.live/" target="_blank"><strong>Sign Up</strong></a></em></p>
+        </div>
+        <div>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img src="" alt="" loading="lazy">
+          </picture>
+        </div>
+      </div>
+    </div>
+    <h4 id="standard---large">Standard - Large</h4>
+    <div class="aside--large- aside large block" data-block-name="aside" data-block-status="loaded">
+      <div>
+        <div>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img src="" alt="" loading="lazy">
+          </picture>
+        </div>
+      </div>
+      <div>
+        <div>
+          <p>{{icon-illustrator}}</p>
+          <p>Detail M Bold</p>
+          <h3
+            id="heading-xl-aside-standard-large-five-lines-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-sed-do-eismod-tempor-incididunt">
+            Heading XL Aside standard large five lines Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit, sed do eismod tempor incididunt.</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+          </p>
+          <p><strong><a href="https://www.hlx.live/" target="_blank">Learn More</a></strong> <em><a
+                href="https://www.hlx.live/" target="_blank"><strong>Sign Up</strong></a></em></p>
+        </div>
+        <div>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img src="" alt="" loading="lazy">
+          </picture>
+        </div>
+      </div>
+    </div>
     <h4 id="simple---small">Simple - Small</h4>
     <div class="aside--simple--small- aside simple small block" data-block-name="aside" data-block-status="loaded">
       <div>
@@ -18,6 +100,511 @@ <h3 id="heading-xl-aside-standard-small-two-lines-1">Heading XL Aside Standard S
         </div>
       </div>
     </div>
+    <h4 id="split---small">Split - Small</h4>
+    <div class="aside--split--small- aside split small block" data-block-name="aside" data-block-status="loaded">
+      <div>
+        <div>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img src="" alt="" loading="lazy">
+          </picture>
+        </div>
+      </div>
+      <div>
+        <div>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-aside-split-ipsum">Heading XL Aside split ipsum.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna.</p>
+          <p><strong><a href="https://www.hlx.live/" target="_blank">Learn More</a></strong></p>
+        </div>
+      </div>
+    </div>
+    <h4 id="split--medium---half">Split – Medium - Half</h4>
+    <div class="aside--split--medium--half- aside split medium half block" data-block-name="aside"
+      data-block-status="loaded">
+      <div>
+        <div>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img src="" alt="" loading="lazy">
+          </picture>
+        </div>
+      </div>
+      <div>
+        <div>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit">Heading XL Lorem ipsum dolor
+            sit, consectetur adipiscing elit.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus
+            qui blanditiis.</p>
+          <p><strong><a href="https://www.hlx.live/" target="_blank">Learn More</a></strong></p>
+        </div>
+      </div>
+    </div>
+    <h4 id="split--large---right">Split – Large - Right</h4>
+    <div class="aside--split--large--right- aside split large right block" data-block-name="aside"
+      data-block-status="loaded">
+      <div>
+        <div>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img src="" alt="" loading="lazy">
+          </picture>
+        </div>
+      </div>
+      <div>
+        <div>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit-sed-do-eiusmod--incididunt-ut">
+            Heading XL Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.
+          </h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus
+            qui blanditiis praesentium voluptatum deleniti atque.</p>
+          <p><strong><a href="https://www.hlx.live/" target="_blank">Learn More</a></strong></p>
+        </div>
+      </div>
+    </div>
+    <div class="aside medium split half">
+      <div>
+        <div data-valign="middle">#eeeeee</div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <source type="image/webp"
+                srcset="./"
+                media="(min-width: 600px)">
+              <source type="image/webp"
+                srcset="./">
+              <source type="image/png"
+                srcset="./"
+                media="(min-width: 600px)">
+              <img loading="lazy" alt=""
+                src=""
+                width="154" height="150">
+            </picture>
+          </p>
+          <p><strong>DETAIL M BOLD</strong></p>
+          <h2 id="heading-xl-aside-standard-small">Heading XL Aside Standard Small</h2>
+          <p>Body S Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
+          <ul>
+            <li>
+              <a href="https://www.adobe.com/">Adobe Photoshop</a>
+              <a href="https://milo.adobe.com/" class="image-link">
+                <picture>
+                  <source type="image/webp"
+                    srcset="./"
+                    media="(min-width: 600px)">
+                  <source type="image/webp"
+                    srcset="./">
+                  <source type="image/png"
+                    srcset="./"
+                    media="(min-width: 600px)">
+                  <img loading="eager" alt="Image"
+                    src=""
+                    width="154" height="150" fetchpriority="high">
+                </picture>
+              </a>
+            </li>
+            <li>
+              <picture>
+                <source type="image/webp"
+                  srcset="./"
+                  media="(min-width: 600px)">
+                <source type="image/webp"
+                  srcset="./">
+                <source type="image/png"
+                  srcset="./"
+                  media="(min-width: 600px)">
+                <img loading="lazy" alt=""
+                  src=""
+                  width="154" height="150">
+              </picture><a href="https://www.adobe.com/">Adobe Illustrator</a>
+            </li>
+            <li>
+              <picture>
+                <source type="image/webp"
+                  srcset="./"
+                  media="(min-width: 600px)">
+                <source type="image/webp"
+                  srcset="./">
+                <source type="image/png"
+                  srcset="./"
+                  media="(min-width: 600px)">
+                <img loading="lazy" alt=""
+                  src=""
+                  width="154" height="150">
+              </picture> Adobe Photoshop
+            </li>
+            <li>
+              <picture>
+                <source type="image/webp"
+                  srcset="./"
+                  media="(min-width: 600px)">
+                <source type="image/webp"
+                  srcset="./">
+                <source type="image/png"
+                  srcset="./"
+                  media="(min-width: 600px)">
+                <img loading="lazy" alt=""
+                  src=""
+                  width="154" height="150">
+              </picture>Adobe Illustrator
+            </li>
+          </ul>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle">
+          <picture>
+            <source type="image/webp"
+              srcset="./"
+              media="(min-width: 600px)">
+            <source type="image/webp"
+              srcset="./">
+            <source type="image/jpeg"
+              srcset="./"
+              media="(min-width: 600px)">
+            <img loading="lazy" alt=""
+              src=""
+              width="750" height="453">
+          </picture>
+        </div>
+      </div>
+    </div>
+    <div class="aside split large">
+      <div>
+        <div data-valign="middle">#d3d3d3</div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <source type="image/webp"
+                srcset="./"
+                media="(min-width: 600px)">
+              <source type="image/webp"
+                srcset="./">
+              <source type="image/png"
+                srcset="./"
+                media="(min-width: 600px)">
+              <img loading="eager" alt=""
+                src=""
+                width="154" height="150" fetchpriority="high">
+            </picture>
+          </p>
+          <p><strong>DETAIL M BOLD</strong></p>
+          <h2 id="heading-xl-aside-standard-small">Heading XL Aside Standard Small</h2>
+          <p>Body S Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle">
+          <video playsinline="" autoplay="" loop="" muted="">
+            <source src="" type="video/mp4">
+          </video>
+        </div>
+      </div>
+    </div>
+    <div class="aside split large">
+      <div>
+        <div data-valign="middle">
+          <video playsinline="" autoplay="" loop="" muted="">
+            <source src="" type="video/mp4">
+          </video>
+        </div>
+        <div data-valign="middle">
+          <video playsinline="" autoplay="" loop="" muted="">
+            <source src="" type="video/mp4">
+          </video>
+        </div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit">Heading XL Lorem ipsum dolor sit,
+            consectetur adipiscing elit.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle"></div>
+      </div>
+    </div>
+    <div class="aside split large">
+      <div>
+        <div data-valign="middle">
+          <video playsinline="" autoplay="" loop="" muted="">
+            <source src="" type="video/mp4">
+          </video>
+        </div>
+        <div data-valign="middle">
+          <video playsinline="" autoplay="" loop="" muted="">
+            <source src="" type="video/mp4">
+          </video>
+        </div>
+        <div data-valign="middle">
+          <video playsinline="" autoplay="" loop="" muted="">
+            <source src="" type="video/mp4">
+          </video>
+        </div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit">Heading XL Lorem ipsum dolor sit,
+            consectetur adipiscing elit.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle"></div>
+      </div>
+    </div>
+    <div class="aside split large">
+      <div>
+        <div data-valign="middle">
+          <video playsinline="" autoplay="" loop="" muted="">
+            <source src="" type="video/mp4">
+          </video>
+        </div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit">Heading XL Lorem ipsum dolor sit,
+            consectetur adipiscing elit.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle"></div>
+      </div>
+    </div>
+    <div class="aside split medium half aspect-ratio aspect-ratio-three">
+      <div>
+        <div data-valign="middle"><strong>#d3d3d3</strong></div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <img loading="eager" alt="" type="image/jpeg" src="" width="640" height="480">
+            </picture>
+          </p>
+          <div></div>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit-sed-do-eiusmod-incididunt-ut">Heading XL
+            Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+            praesentium voluptatum deleniti atque.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <source type="image/webp"
+                srcset="./"
+                media="(min-width: 600px)">
+              <source type="image/webp"
+                srcset="./">
+              <source type="image/jpeg"
+                srcset="./"
+                media="(min-width: 600px)">
+              <img loading="lazy" alt=""
+                src=""
+                width="750" height="453">
+            </picture>
+          </p>
+          <p>format: square standard wide</p>
+        </div>
+      </div>
+    </div>
+    <div class="aside split medium half aspect-ratio aspect-ratio-two">
+      <div>
+        <div data-valign="middle"><strong>#d3d3d3</strong></div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <img loading="eager" alt="" type="image/jpeg" src="" width="640" height="480">
+            </picture>
+          </p>
+          <div></div>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit-sed-do-eiusmod-incididunt-ut">Heading XL
+            Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+            praesentium voluptatum deleniti atque.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <source type="image/webp"
+                srcset="./"
+                media="(min-width: 600px)">
+              <source type="image/webp"
+                srcset="./">
+              <source type="image/jpeg"
+                srcset="./"
+                media="(min-width: 600px)">
+              <img loading="lazy" alt=""
+                src=""
+                width="750" height="453">
+            </picture>
+          </p>
+          <p>format: standard wide</p>
+        </div>
+      </div>
+    </div>
+    <div class="aside split medium half aspect-ratio aspect-ratio-one">
+      <div>
+        <div data-valign="middle"><strong>#d3d3d3</strong></div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <img loading="eager" alt="" type="image/jpeg" src="" width="640" height="480">
+            </picture>
+          </p>
+          <div></div>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit-sed-do-eiusmod-incididunt-ut">Heading XL
+            Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+            praesentium voluptatum deleniti atque.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <source type="image/webp"
+                srcset="./"
+                media="(min-width: 600px)">
+              <source type="image/webp"
+                srcset="./">
+              <source type="image/jpeg"
+                srcset="./"
+                media="(min-width: 600px)">
+              <img loading="lazy" alt=""
+                src=""
+                width="750" height="453">
+            </picture>
+          </p>
+          <p>format: standard</p>
+        </div>
+      </div>
+    </div>
+    <div class="aside split medium half aspect-ratio aspect-ratio-none">
+      <div>
+        <div data-valign="middle"><strong>#d3d3d3</strong></div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <img loading="eager" alt="" type="image/jpeg" src="" width="640" height="480">
+            </picture>
+          </p>
+          <div></div>
+          <p>Detail M Bold</p>
+          <h3 id="heading-xl-lorem-ipsum-dolor-sit-consectetur-adipiscing-elit-sed-do-eiusmod-incididunt-ut">Heading XL
+            Lorem ipsum dolor sit, consectetur adipiscing elit, sed do eiusmod incididunt ut.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+            praesentium voluptatum deleniti atque.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <em><a
+                href="https://www.adobe.com/"><strong>Learn More</strong></a></em></p>
+        </div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <source type="image/webp"
+                srcset="./"
+                media="(min-width: 600px)">
+              <source type="image/webp"
+                srcset="./">
+              <source type="image/jpeg"
+                srcset="./"
+                media="(min-width: 600px)">
+              <img loading="lazy" alt=""
+                src=""
+                width="750" height="453">
+            </picture>
+          </p>
+          <p>format:</p>
+        </div>
+      </div>
+    </div>
+    <div class="aside large split bio">
+      <div>
+        <div data-valign="middle">#eeeeee</div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <source type="image/webp"
+                srcset="./"
+                media="(min-width: 600px)">
+              <source type="image/webp"
+                srcset="./">
+              <source type="image/png"
+                srcset="./"
+                media="(min-width: 600px)">
+              <img loading="lazy" alt=""
+                src=""
+                width="154" height="150">
+            </picture>
+          </p>
+          <p><strong>DETAIL M BOLD</strong></p>
+          <h3
+            id="heading-xl-aside-standard-large-five-lines-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-sed-do-eismod-tempor-incididunt">
+            Heading XL Aside standard large five lines Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eismod tempor incididunt.</h3>
+          <p>Body S Regular. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
+          <p><strong><a href="https://www.adobe.com/">Learn More</a></strong> <a href="https://www.adobe.com/">Text
+              Link</a></p>
+          <p>Supplemental text for large</p>
+        </div>
+        <div data-valign="middle">
+          <picture>
+            <source type="image/webp"
+              srcset="./"
+              media="(min-width: 600px)">
+            <source type="image/webp"
+              srcset="./">
+            <source type="image/png"
+              srcset="./"
+              media="(min-width: 600px)">
+            <img loading="lazy" alt=""
+              src=""
+              width="500" height="375">
+          </picture>
+        </div>
+      </div>
+    </div>
   </div>
   <h2>Inline</h2>
   <div class="aside inline">
diff --git a/test/blocks/aside/mocks/split.html b/test/blocks/aside/mocks/split.html
deleted file mode 100644
index 11f3e609d4..0000000000
--- a/test/blocks/aside/mocks/split.html
+++ /dev/null
@@ -1,114 +0,0 @@
-<div class="aside split medium" id="test-default">
-  <div>
-    <div data-valign="middle">#1e1e1e</div>
-  </div>
-  <div>
-    <div data-valign="middle">
-      <p>
-        <picture>
-          <img loading="lazy" alt="" src="" width="166" height="160">
-        </picture>
-      </p>
-      <p>Detail</p>
-      <h3 id="heading--aside-split-medium">Heading – Aside (split, medium)</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <ul>
-        <li>
-          <picture>
-            <img loading="lazy" alt="https://milo.adobe.com | Image" src="" width="154" height="150">
-          </picture> <a href="https://www.adobe.com/">Adobe Photoshop 1</a>
-        </li>
-        <li>
-          <picture>
-            <img loading="lazy" alt="" src="" width="154" height="150">
-          </picture><a href="https://www.adobe.com/">Adobe Photoshop 2</a>
-        </li>
-      </ul>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <strong><a href="https://www.adobe.com/">Learn More</a></strong> <a href="https://www.adobe.com/">Text Link</a></p>
-      <p>Body CTA supplemental text (optional)</p>
-    </div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="2320" height="840">
-      </picture>
-    </div>
-  </div>
-</div>
-<div class="aside split l-heading m-body l-detail" id="test-text-overrides">
-  <div>
-    <div data-valign="middle">#1e1e1e</div>
-  </div>
-  <div>
-    <div data-valign="middle">
-      <p>
-        <picture>
-          <img loading="lazy" alt="" src="" width="166" height="160">
-        </picture>
-      </p>
-      <p>Detail</p>
-      <h3 id="heading--aside-split-l-heading-m-body-l-detail">Heading – Aside (split, l-heading, m-body, l-detail)</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <strong><a href="https://www.adobe.com/">Learn More</a></strong> <a href="https://www.adobe.com/">Text Link</a></p>
-      <p>Body CTA supplemental text (optional)</p>
-    </div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="2320" height="840">
-      </picture>
-    </div>
-  </div>
-</div>
-<div class="aside split l-title" id="test-title">
-  <div>
-    <div data-valign="middle">
-      <p>Title</p>
-      <h3 id="heading--aside-split-l-title">Heading – Aside (split, l-title)</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <strong><a href="https://www.adobe.com/">Learn More</a></strong> <a href="https://www.adobe.com/">Text Link</a></p>
-      <p>Body CTA supplemental text (optional)</p>
-    </div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="2320" height="840">
-      </picture>
-    </div>
-  </div>
-</div>
-<div class="aside split l-avatar" id="test-avatar">
-  <div>
-    <div data-valign="middle">
-      <p>
-        <picture>
-          <img loading="lazy" alt="" src="" width="166" height="160">
-        </picture>
-      </p>
-      <p>Detail</p>
-      <h3 id="heading--aside-split-l-avatar">Heading – Aside (split, l-avatar)</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <strong><a href="https://www.adobe.com/">Learn More</a></strong> <a href="https://www.adobe.com/">Text Link</a></p>
-      <p>Body CTA supplemental text (optional)</p>
-    </div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="2320" height="840">
-      </picture>
-    </div>
-  </div>
-</div>
-<div class="aside split l-lockup" id="test-lockup">
-  <div>
-    <div data-valign="middle">
-      <p><a href=""><picture><img loading="lazy" src=""></picture></a> Adobe</p>
-      <p>Detail</p>
-      <h3 id="heading--aside-split-l-avatar">Heading – Aside (split, l-avatar)</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <strong><a href="https://www.adobe.com/">Learn More</a></strong> <a href="https://www.adobe.com/">Text Link</a></p>
-      <p>Body CTA supplemental text (optional)</p>
-    </div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="2320" height="840">
-      </picture>
-    </div>
-  </div>
-</div>
diff --git a/test/blocks/aside/mocks/standard.html b/test/blocks/aside/mocks/standard.html
deleted file mode 100644
index 51b171413e..0000000000
--- a/test/blocks/aside/mocks/standard.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<div class="aside" id="test-default">
-  <div>
-    <div data-valign="middle">#eeeeee</div>
-  </div>
-  <div>
-    <div data-valign="middle">
-      <p>
-        <picture>
-          <img loading="lazy" alt="" src="" width="154" height="150">
-        </picture>
-      </p>
-      <p>Detail</p>
-      <h3 id="heading--aside">Heading – Aside</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <a href="https://www.adobe.com/">Text Link</a></p>
-      <p>Body CTA supplemental text (optional)</p>
-    </div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="500" height="375">
-      </picture>
-    </div>
-  </div>
-</div>
-<div class="aside" id="test-default-2">
-  <div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="750" height="375">
-      </picture>
-    </div>
-  </div>
-  <div>
-    <div data-valign="middle">
-      <p><strong>Detail</strong></p>
-      <h3 id="heading--aside">Heading – Aside</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <a href="https://www.adobe.com/">Text Link</a></p>
-    </div>
-  </div>
-</div>
-<div class="aside center l-heading m-body l-detail" id="test-text-overrides">
-  <div>
-    <div data-valign="middle">
-      <p>Detail</p>
-      <h3 id="heading--aside-center-l-heading-m-body-l-detail">Heading – Aside (center, l-heading, m-body, l-detail)</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <a href="https://www.adobe.com/">Text Link</a></p>
-    </div>
-  </div>
-</div>
-<div class="aside center l-title" id="test-title">
-  <div>
-    <div data-valign="middle">
-      <p>Title</p>
-      <h3 id="heading--aside-center-l-title">Heading – Aside (center, l-title)</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <a href="https://www.adobe.com/">Text Link</a></p>
-    </div>
-  </div>
-</div>
-<div class="aside l-avatar" id="test-avatar">
-  <div>
-    <div data-valign="middle">
-      <p>
-        <picture>
-          <img loading="lazy" alt="" src="" width="86" height="86">
-        </picture>
-      </p>
-      <p>Detail</p>
-      <h3 id="heading--aside-l-avatar">Heading – Aside (l-avatar)</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <a href="https://www.adobe.com/">Text Link</a></p>
-    </div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="500" height="375">
-      </picture>
-    </div>
-  </div>
-</div>
-<div class="aside m-lockup" id="test-lockup">
-  <div>
-    <div data-valign="middle">
-      <p><a href=""><picture><img loading="lazy" src=""></picture></a> Adobe</p>
-      <p>Detail</p>
-      <h3 id="heading--aside">Heading – Aside</h3>
-      <p>Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <a href="https://www.adobe.com/">magna</a>.</p>
-      <p><em><a href="https://www.adobe.com/">Learn More</a></em> <a href="https://www.adobe.com/">Text Link</a></p>
-    </div>
-    <div data-valign="middle">
-      <picture>
-        <img loading="lazy" alt="" src="" width="500" height="375">
-      </picture>
-    </div>
-  </div>
-</div>