feat: columns block

blocks/columns/columns.css

@@ -1,33 +1,107 @@
+.columns {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-m);
+}
+
 .columns > div {
   display: flex;
   flex-direction: column;
+  gap: var(--space-m);
+}
+
+@media (width >= 600px) {
+  .columns,
+  .columns > div {
+    gap: 0;
+  }
+
+  .columns > div {
+    flex-direction: row;
+  }
+
+  .columns > div > div {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .columns [data-row="media"] {
+    align-items: center;
+  }
+}
+
+/* media wrapper */
+.columns .media-wrapper {
+  order: -1;
+  position: relative;
+  overflow: hidden;
+  min-height: 184px;
+}
+
+.columns .media-wrapper picture {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
 }
 
-.columns img {
+.columns .media-wrapper img {
+  height: 100%;
   width: 100%;
+  object-fit: cover;
 }
 
-.columns > div > div {
-  order: 1;
+@media (width >= 600px) {
+  .columns .media-wrapper {
+    align-self: stretch;
+    order: unset;
+    min-height: 314px;
+  }
 }
 
-.columns > div > .columns-img-col {
-  order: 0;
+/* body wrapper */
+.columns .body-wrapper {
+  box-sizing: border-box;
 }
 
-.columns > div > .columns-img-col img {
+.columns .body-wrapper h1::after,
+.columns .body-wrapper h2::after,
+.columns .body-wrapper h3::after,
+.columns .body-wrapper h4::after,
+.columns .body-wrapper h5::after,
+.columns .body-wrapper h6::after {
+  content: '';
   display: block;
+  height: 5px;
+  width: 40px;
+  margin-top: var(--space-s);
+  background-color: var(--color-brand);
+}
+
+.columns .body-wrapper .button {
+  width: 100%;
+}
+
+@media (width >= 600px) {
+  .columns .body-wrapper .button {
+    width: unset;
+    min-width: 200px;
+  }
+
+  .columns [data-row="media"] .body-wrapper {
+    padding: var(--space-m);
+  }
 }
 
 @media (width >= 900px) {
-  .columns > div {
-    flex-direction: unset;
-    align-items: center;
-    gap: var(--space-m);
+  .columns [data-row="media"] .body-wrapper {
+    padding: var(--space-xl);
   }
+}
 
-  .columns > div > div {
-    flex: 1;
-    order: unset;
+/* checkerboard */
+@media (width >= 600px) {
+  .columns.cols-2 > div {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
   }
 }

blocks/columns/columns.js

@@ -1,18 +1,45 @@
-export default function decorate(block) {
-  const cols = [...block.firstElementChild.children];
-  block.classList.add(`columns-${cols.length}-cols`);
+import { createOptimizedPicture } from '../../scripts/aem.js';
+
+/**
+ * Returns the shared column count if every row has the same number of columns.
+ * @param {Element} block The block element
+ * @returns {number|null} Column count, or `null` if rows differ
+ */
+function getColCount(block) {
+  const rows = [...block.children];
+  if (rows.length === 0) return null;
+  const n = rows[0].children.length;
+  return rows.every((row) => row.children.length === n) ? n : null;
+}
 
-  // setup image columns
+/**
+ * Replaces all images in the block with optimized picture elements.
+ * @param {Element} block The columns block element
+ */
+function optimizeImages(block) {
+  block.querySelectorAll('.media-wrapper picture > img').forEach((img) => {
+    img.closest('picture').replaceWith(
+      createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]),
+    );
+  });
+}
+
+/** @param {Element} block */
+export default function decorate(block) {
   [...block.children].forEach((row) => {
     [...row.children].forEach((col) => {
-      const pic = col.querySelector('picture');
-      if (pic) {
-        const picWrapper = pic.closest('div');
-        if (picWrapper && picWrapper.children.length === 1) {
-          // picture is only content in column
-          picWrapper.classList.add('columns-img-col');
-        }
-      }
+      const els = [...col.children];
+      const isMedia = els.length > 0 && els.every((el) => el.tagName === 'PICTURE' || el.tagName === 'VIDEO');
+      col.classList.add(isMedia ? 'media-wrapper' : 'body-wrapper');
     });
+    if (row.querySelector('.media-wrapper')) row.dataset.row = 'media';
   });
+
+  const colCount = getColCount(block);
+  if (colCount && ![...block.classList].some((c) => c.startsWith('cols-'))) {
+    block.classList.add(`cols-${colCount}`);
+    if (colCount % 2 === 0) block.classList.add('cols-even');
+  }
+
+  optimizeImages(block);
 }

blocks/footer/footer.css

@@ -16,7 +16,7 @@ footer .footer {
   padding: var(--space-l);
 }
 
-@media (width >=900px) {
+@media (width >= 900px) {
   footer .footer {
     gap: var(--space-m);
   }
@@ -66,19 +66,19 @@ footer .footer details[open] .icon svg {
   transform: rotate(-180deg);
 }
 
-footer .footer details>ul {
+footer .footer details > ul {
   display: block;
   overflow: hidden;
   height: 0;
   padding: 0.8em 0;
   transition: height 0.2s ease;
 }
 
-footer .footer details>ul>li {
+footer .footer details > ul > li {
   padding: 0.6em 0;
 }
 
-@media (width >=600px) {
+@media (width >= 600px) {
   footer .footer summary {
     grid-template-columns: 1fr;
     cursor: default;
@@ -95,14 +95,14 @@ footer .footer details>ul>li {
     display: none;
   }
 
-  footer .footer details>ul {
+  footer .footer details > ul {
     overflow: visible;
     height: auto;
     padding: 0;
     transition: none;
   }
 
-  footer .footer details>ul>li {
+  footer .footer details > ul > li {
     padding: 0.4em 0;
   }
 }
@@ -112,15 +112,15 @@ footer .footer-nav {
   grid-area: nav;
 }
 
-@media (width >=600px) {
+@media (width >= 600px) {
   footer .footer-nav {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
     gap: var(--space-s);
   }
 }
 
-@media (width >=900px) {
+@media (width >= 900px) {
   footer .footer-nav {
     grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
   }
@@ -148,7 +148,7 @@ footer .footer-social a {
   width: 44px;
 }
 
-@media (width >=600px) {
+@media (width >= 600px) {
   footer .footer-social ul {
     justify-content: flex-end;
   }
@@ -191,7 +191,7 @@ footer .footer-copyright #cookie:focus-visible {
   text-decoration: underline;
 }
 
-@media (width >=600px) {
+@media (width >= 600px) {
   footer .footer-copyright ul {
     display: flex;
     flex-wrap: wrap;