Merge branch 'main' into bug/hero-gradient

blocks/cards/cards.css

@@ -33,6 +33,11 @@
   padding: 0;
 }
 
+.cards.block.cards-1-cols .cards-list .card-image {
+  margin-bottom: 25px;
+}
+
+
 .cards.block .cards-list .cards-item .card-image {
   position: relative;
   display: flex;
@@ -47,12 +52,11 @@
   position: relative;
   height: 100%;
   width: 100%;
-  padding-bottom: 66%;
 }
 
 .cards.block .cards-list .cards-item .card-image img {
   position: absolute;
-  top: 0;
+  bottom: 0;
   left: 0;
   object-fit: cover;
   object-position: center;

blocks/cards/cards.js

@@ -14,7 +14,7 @@ export default function decorate(block) {
   list.classList.add('cards-list');
   block.append(list);
 
-  // add logic for check-list case
+  // add logic for checklist case
   if (block.classList.contains('icons')) {
     block.classList.add('cards-2-cols');
     cards.forEach((row) => {
@@ -24,6 +24,7 @@ export default function decorate(block) {
       list.append(row);
     });
   } else {
+    let ratio = 9999;
     block.classList.add(`cards-${cards.length}-cols`);
     cards.forEach((row) => {
       row.className = 'cards-item';
@@ -32,13 +33,24 @@ export default function decorate(block) {
           // update container for picture with label
           div.classList.add('card-image');
           const picture = div.querySelector('picture');
+          const img = picture.querySelector('img');
+          const tmp = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+          if (tmp < ratio) {
+            ratio = tmp;
+          }
           const paragraphElement = document.createElement(('p'));
           paragraphElement.textContent = div.textContent.trim();
           div.replaceChildren(picture, paragraphElement);
         } else {
           div.classList.add('card-body');
         }
       });
+      // Pad the picture with the smallest ratio image.
+      [...row.children].forEach((div) => {
+        if (div.querySelector('picture')) {
+          div.querySelector('picture').style.paddingBottom = `${ratio}%`;
+        }
+      });
       list.append(row);
     });
   }

blocks/separator/separator.css

@@ -5,3 +5,7 @@
   border: none;
   background: var(--platinum);
 }
+
+.separator.block.padded {
+  margin: 30px 0;
+}

scripts/scripts.js

@@ -150,6 +150,14 @@ function decorateVideoLinks(main) {
     });
 }
 
+function decorateImages(main) {
+  main.querySelectorAll('.section .default-content-wrapper picture').forEach((picture) => {
+    const img = picture.querySelector('img');
+    const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+    picture.style.paddingBottom = `${ratio}%`;
+  });
+}
+
 /**
  * Build Floating image block
  * @param {Element} main The container element
@@ -252,6 +260,7 @@ export function decorateMain(main) {
   decorateSections(main);
   decorateBlocks(main);
   decorateVideoLinks(main);
+  decorateImages(main);
 }
 
 /**

styles/styles.css

@@ -304,6 +304,23 @@ main .section .default-content-wrapper h4 {
   margin-bottom: 1.25em;
 }
 
+main .section .default-content-wrapper picture {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+main .section .default-content-wrapper picture img {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  object-fit: cover;
+  object-position: center;
+}
+
 /* common styles */
 @keyframes spinner-spin {
   0% { transform: rotate(0deg); }