diff --git a/src/components/mediaObject/__tests__/CdrMediaObject.spec.js b/src/components/mediaObject/__tests__/CdrMediaObject.spec.js
index 9d7c9f2ee..16e852509 100644
--- a/src/components/mediaObject/__tests__/CdrMediaObject.spec.js
+++ b/src/components/mediaObject/__tests__/CdrMediaObject.spec.js
@@ -1,14 +1,101 @@
 import { mount } from '../../../../test/vue-jest-style-workaround.js';
 import CdrMediaObject from '../CdrMediaObject.vue';
+import CdrSurface from '../../surface/CdrSurface.vue';
+
+export const examples = [
+  {
+    label: 'default: media position left, media width 1fr, media height auto, align start',
+    props: {},
+  },
+  {
+    label: 'content padding',
+    props: { contentPadding: 'two-x' },
+  },
+  {
+    label: 'content padding dynamic',
+    props: { contentPadding: { xs: 'one-x', sm: 'one-x', md: 'three-x', lg: 'three-x' } },
+  },
+  {
+    label: 'media width 100px',
+    props: { mediaWidth: '100px' },
+  },
+  {
+    label: 'media width dynamic',
+    props: { mediaWidth: { xs: '100px', sm: '100px', md: '300px', lg: '300px' } },
+  },
+  {
+    label: 'align center',
+    props: { mediaWidth: 'auto', align: 'center' },
+  },
+  {
+    label: 'dynamic align',
+    props: { mediaWidth: 'auto', align: { xs: 'center', sm: 'center', md: 'end', lg: 'start' } },
+  },
+  {
+    label: 'cover',
+    props: { mediaWidth: '125px', cover: true },
+  },
+  {
+    label: 'media position right',
+    props: {
+      mediaPosition: 'right',
+    },
+  },
+  {
+    label: 'media position dynamic',
+    props: {
+      mediaPosition: { xs: 'top', sm: 'bottom', md: 'left', lg: 'right' },
+    },
+  },
+  {
+    label: 'media bottom',
+    props: {
+      mediaPosition: 'bottom',
+    },
+  },
+  {
+    label: 'media top, align center',
+    props: {
+      mediaPosition: 'top',
+      align: 'center',
+    },
+  },
+  {
+    label: 'media position dynamic, media height dynamic, media width dynamic',
+    props: {
+      mediaWidth: { xs: '100%', sm: '100%', md: '50%', lg: '75%' },
+      mediaHeight: { xs: '100px', sm: '200px', md: 'auto', lg: 'auto' },
+      mediaPosition: { xs: 'top', sm: 'top', md: 'left', lg: 'left' },
+      cover: true,
+    },
+  },
+  {
+    label: 'overlay, row align, column align, content configured independently to 50% width',
+    props: {
+      overlay: true,
+      overlayColumnAlign: 'end',
+      overlayRowAlign: 'center',
+    },
+  },
+  {
+    label: 'pass down props to Layout and Surface',
+    props: {
+      background: 'brand-spruce',
+      as: CdrSurface,
+    },
+  },
+];
 
 describe('CdrMediaObject', () => {
-  describe('snapshot test', () => {
-    let wrapper;
-    beforeEach(() => {
-      wrapper = mount(CdrMediaObject, { props: { checked: false } });
-    });
-    it('renders correctly', () => {
-      expect(wrapper.element).toMatchSnapshot();
+  describe('snapshot tests', () => {
+    examples.forEach(({ label, props }) => {
+      it(label, () => {
+        const wrapper = mount(CdrMediaObject, {
+          props,
+          slots: { content: 'Some content', media: 'Some media' },
+        });
+        expect(wrapper.element).toMatchSnapshot();
+      });
     });
   });
 });
diff --git a/src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap b/src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap
index 99e630462..686e04d96 100644
--- a/src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap
+++ b/src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap
@@ -1,18 +1,399 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CdrMediaObject > snapshot test > renders correctly 1`] = `
+exports[`CdrMediaObject > snapshot tests > align center 1`] = `
 <div
-  checked="false"
   class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: auto 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: center;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > content padding 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-content-padding: 32px; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > content padding dynamic 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--content-padding-cq"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-content-padding-xs: 16px; --cdr-media-object-content-padding-sm: 16px; --cdr-media-object-content-padding-md: 48px; --cdr-media-object-content-padding-lg: 48px; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > cover 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--cover"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: 125px 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > default: media position left, media width 1fr, media height auto, align start 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > dynamic align 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--align-cq"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: auto 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align-xs: center; --cdr-media-object-align-sm: center; --cdr-media-object-align-md: end; --cdr-media-object-align-lg: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > media bottom 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
+  style="--cdr-layout-rows: 1fr auto; --cdr-layout-columns: 1fr; --cdr-media-object-media-position: 'content' 'media'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > media position dynamic 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--rows-cq cdr-layout--columns cdr-layout--columns-cq cdr-media-object cdr-media-object--media-position-cq"
+  style="--cdr-layout-rows-xs: auto 1fr; --cdr-layout-rows-sm: 1fr auto; --cdr-layout-rows-md: auto; --cdr-layout-rows-lg: auto; --cdr-layout-columns-xs: 1fr; --cdr-layout-columns-sm: 1fr; --cdr-layout-columns-md: 1fr 1fr; --cdr-layout-columns-lg: 1fr 1fr; --cdr-media-object-media-position-xs: 'media' 'content'; --cdr-media-object-media-position-sm: 'content' 'media'; --cdr-media-object-media-position-md: 'media content'; --cdr-media-object-media-position-lg: 'content media'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > media position dynamic, media height dynamic, media width dynamic 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--rows-cq cdr-layout--columns cdr-layout--columns-cq cdr-media-object cdr-media-object--media-position-cq cdr-media-object--cover"
+  style="--cdr-layout-rows-xs: 100px 1fr; --cdr-layout-rows-sm: 200px 1fr; --cdr-layout-rows-md: auto; --cdr-layout-rows-lg: auto; --cdr-layout-columns-xs: 100%; --cdr-layout-columns-sm: 100%; --cdr-layout-columns-md: 50% 1fr; --cdr-layout-columns-lg: 75% 1fr; --cdr-media-object-media-position-xs: 'media' 'content'; --cdr-media-object-media-position-sm: 'media' 'content'; --cdr-media-object-media-position-md: 'media content'; --cdr-media-object-media-position-lg: 'media content'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > media position right 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-media-position: 'content media'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > media top, align center 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
+  style="--cdr-layout-rows: auto 1fr; --cdr-layout-columns: 1fr; --cdr-media-object-media-position: 'media' 'content'; --cdr-media-object-align: center;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > media width 100px 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: 100px 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > media width dynamic 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-layout--columns-cq cdr-media-object"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns-xs: 100px 1fr; --cdr-layout-columns-sm: 100px 1fr; --cdr-layout-columns-md: 300px 1fr; --cdr-layout-columns-lg: 300px 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > overlay, row align, column align, content configured independently to 50% width 1`] = `
+<div
+  class="cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object cdr-media-object--overlay"
+  style="--cdr-layout-rows: auto; --cdr-layout-columns: auto; --cdr-media-object-row-align: center; --cdr-media-object-column-align: end;"
+>
+  <!-- @slot Where all default content should be placed. -->
+  
+  <div
+    class="cdr-media-object__media"
+  >
+    <!-- @slot Where the media should be placed. Should be a single node. -->
+    
+    Some media
+    
+  </div>
+  <div
+    class="cdr-media-object__content"
+  >
+    <!-- @slot Where all content should be placed. Can be multiple nodes. -->
+    
+    Some content
+    
+  </div>
+  
+</div>
+`;
+
+exports[`CdrMediaObject > snapshot tests > pass down props to Layout and Surface 1`] = `
+<div
+  class="cdr-surface cdr-surface--modifier-default cdr-surface--background-brand-spruce cdr-surface--radius-sharp cdr-surface--shadow-flat cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
+  data-palette="default"
   style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
 >
   <!-- @slot Where all default content should be placed. -->
   
+  <!-- @slot Where all default content should be placed. -->
+  
   <div
     class="cdr-media-object__media"
   >
     <!-- @slot Where the media should be placed. Should be a single node. -->
     
+    Some media
     
   </div>
   <div
@@ -20,8 +401,10 @@ exports[`CdrMediaObject > snapshot test > renders correctly 1`] = `
   >
     <!-- @slot Where all content should be placed. Can be multiple nodes. -->
     
+    Some content
     
   </div>
   
+  
 </div>
 `;
diff --git a/src/components/mediaObject/examples/MediaObject.vue b/src/components/mediaObject/examples/MediaObject.vue
index fbe9d8e73..59b8f9e9d 100644
--- a/src/components/mediaObject/examples/MediaObject.vue
+++ b/src/components/mediaObject/examples/MediaObject.vue
@@ -137,7 +137,6 @@ const examples: MediaObjectExample[] = [
   {
     label: 'pass down props to Layout and Surface',
     props: {
-      gap: 'two-x',
       background: 'brand-spruce',
     },
     flags: ['color-inverse'],