diff --git a/dist/objects/o-media-spread.css b/dist/objects/o-media-spread.css
new file mode 100644
index 000000000..acf8cfaf8
--- /dev/null
+++ b/dist/objects/o-media-spread.css
@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.43.2+ | MIT | github.com/TACC/Core-Styles */.o-media-spread{container-type:inline-size;display:grid;gap:var(--global-space--grid-gap)}.o-media-spread>*{width:100%}@container (min-width: 400px){.o-media-spread--2-cols{grid-template-columns:repeat(2,1fr)}.o-media-spread--2-cols>:last-child:nth-child(2n - 1){grid-column:span 2}}@container (max-width: 399px){.o-media-spread--2-cols{grid-template-columns:repeat(1,1fr)}.o-media-spread--2-cols>:last-child:nth-child(1n - 0){grid-column:span 1}}@container (min-width: 600px){.o-media-spread--3-cols{grid-template-columns:repeat(3,1fr)}.o-media-spread--3-cols>:last-child:nth-child(3n - 2){grid-column:span 3}}@container (max-width: 599px){.o-media-spread--3-cols{grid-template-columns:repeat(2,1fr)}.o-media-spread--3-cols>:last-child:nth-child(2n - 1){grid-column:span 1}}@container (min-width: 400px){.o-media-spread--4-cols{grid-template-columns:repeat(4,1fr)}.o-media-spread--4-cols>:last-child:nth-child(4n - 3){grid-column:span 2}}@container (max-width: 399px){.o-media-spread--4-cols{grid-template-columns:repeat(3,1fr)}.o-media-spread--4-cols>:last-child:nth-child(3n - 2){grid-column:span 1}}
\ No newline at end of file
diff --git a/src/lib/_imports/_partials/img-fluid-with-srcset.hbs b/src/lib/_imports/_partials/img-fluid-with-srcset.hbs
new file mode 100644
index 000000000..4373d5424
--- /dev/null
+++ b/src/lib/_imports/_partials/img-fluid-with-srcset.hbs
@@ -0,0 +1,17 @@
+{{! Image using:
+    - `srcset` attribute (like Django CMS "Picture")
+    - Bootstrap's `.img-fluid` class
+}}
+<img
+    src="https://tacc.utexas.edu/media/filer_public_thumbnails/filer_public/01/e0/01e0ab8d-3af4-4fac-9817-cb375ae1a557/research-projects.jpg__800.0x530.0_q85_subject_location-500%2C336_subsampling-2.jpg"
+    srcset="
+    https://tacc.utexas.edu/media/filer_public_thumbnails/filer_public/01/e0/01e0ab8d-3af4-4fac-9817-cb375ae1a557/research-projects.jpg__576x576_q85_subsampling-2.jpg 576w,
+    https://tacc.utexas.edu/media/filer_public_thumbnails/filer_public/01/e0/01e0ab8d-3af4-4fac-9817-cb375ae1a557/research-projects.jpg__768x768_q85_subsampling-2.jpg 768w,
+    https://tacc.utexas.edu/media/filer_public_thumbnails/filer_public/01/e0/01e0ab8d-3af4-4fac-9817-cb375ae1a557/research-projects.jpg__800.0x530.0_q85_subject_location-500%2C336_subsampling-2.jpg 800.0w"
+    sizes="
+        (max-width: 576px) 576px,
+        (max-width: 768px) 768px,
+        800.0px
+    "
+    class="img-fluid"
+>
\ No newline at end of file
diff --git a/src/lib/_imports/objects/o-media-spread.css b/src/lib/_imports/objects/o-media-spread.css
new file mode 100644
index 000000000..1d563bbec
--- /dev/null
+++ b/src/lib/_imports/objects/o-media-spread.css
@@ -0,0 +1,59 @@
+.o-media-spread {
+    display: grid;
+    container-type: inline-size;
+    gap: var(--global-space--grid-gap);
+}
+.o-media-spread > * {
+    width: 100%;
+}
+
+@container (min-width: 400px) {
+    .o-media-spread--2-cols {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .o-media-spread--2-cols > *:last-child:nth-child(2n - 1) {
+        grid-column: span 2;
+    }
+}
+@container (max-width: 399px) {
+    .o-media-spread--2-cols {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .o-media-spread--2-cols > *:last-child:nth-child(1n - 0) {
+        grid-column: span 1;
+    }
+}
+
+@container (min-width: 600px) {
+    .o-media-spread--3-cols {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .o-media-spread--3-cols > *:last-child:nth-child(3n - 2) {
+        grid-column: span 3;
+    }
+}
+@container (max-width: 599px) {
+    .o-media-spread--3-cols {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .o-media-spread--3-cols > *:last-child:nth-child(2n - 1) {
+        grid-column: span 1;
+    }
+}
+
+@container (min-width: 400px) {
+    .o-media-spread--4-cols {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .o-media-spread--4-cols > *:last-child:nth-child(4n - 3) {
+        grid-column: span 2;
+    }
+}
+@container (max-width: 399px) {
+    .o-media-spread--4-cols {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .o-media-spread--4-cols > *:last-child:nth-child(3n - 2) {
+        grid-column: span 1;
+    }
+}
diff --git a/src/lib/_imports/objects/o-media-spread/config.yml b/src/lib/_imports/objects/o-media-spread/config.yml
new file mode 100644
index 000000000..79abf4569
--- /dev/null
+++ b/src/lib/_imports/objects/o-media-spread/config.yml
@@ -0,0 +1,12 @@
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this
+  supportStyles:
+    - ../../assets/objects/o-section.css
+  types:
+    - cols: 2
+      section: light
+    - cols: 3
+      section: dark
+    - cols: 4
+      section: light
diff --git a/src/lib/_imports/objects/o-media-spread/o-media-spread.hbs b/src/lib/_imports/objects/o-media-spread/o-media-spread.hbs
new file mode 100644
index 000000000..16d6ff07e
--- /dev/null
+++ b/src/lib/_imports/objects/o-media-spread/o-media-spread.hbs
@@ -0,0 +1,25 @@
+{{#types}}
+<section class="o-section o-section--style-{{this.section}}">
+  <h3>{{this.cols}} Columns</h3>
+  <div class="o-media-spread o-media-spread--{{this.cols}}-cols">
+    {{#if (eq this.cols "2")}}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{/if}}
+    {{#if (eq this.cols "3")}}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{/if}}
+    {{#if (eq this.cols "4")}}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{/if}}
+  </div>
+</section>
+{{/types}}