Add css fixes

blocks/cards/cards.css

@@ -3,17 +3,27 @@
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+  grid-template-columns: 1fr 1fr;
   grid-gap: 16px;
 }
 
-.cards > ul > li {
-  border: 1px solid var(--dark-color);
-  background-color: var(--background-color);
+.cards h1,
+.cards h2,
+.cards h3,
+.cards h4,
+.cards h5,
+.cards h6 {
+  margin: 0;
 }
 
 .cards .cards-card-body {
-  margin: 16px;
+  display: flex;
+}
+
+.cards .cards-card-body > * {
+  width: 50%;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
 .cards .cards-card-image {
@@ -26,6 +36,5 @@
 
 .cards > ul > li img {
   width: 100%;
-  aspect-ratio: 4 / 3;
   object-fit: cover;
 }

blocks/cards/cards.js

@@ -1,5 +1,3 @@
-import { createOptimizedPicture } from '../../scripts/aem.js';
-
 export default function decorate(block) {
   /* change to ul, li */
   const ul = document.createElement('ul');
@@ -9,10 +7,23 @@ export default function decorate(block) {
     [...li.children].forEach((div) => {
       if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
       else div.className = 'cards-card-body';
+
+      const textWrapper = document.createElement('div');
+      textWrapper.append(...div.children);
+      div.append(textWrapper);
+      const pic = div.querySelector('picture');
+
+      if (pic) {
+        const el = document.createElement('div');
+        el.classList.add('picture-wrapper');
+        pic.parentElement.remove();
+        el.append(pic);
+        div.prepend(el);
+      }
     });
     ul.append(li);
   });
-  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
+
   block.textContent = '';
   block.append(ul);
 }

blocks/columns/columns.css

@@ -74,6 +74,22 @@
   object-fit: cover;
 }
 
+.columns.align-top > div {
+  align-items: flex-start;
+}
+
+.columns.align-top .text-column {
+  margin-left: 100px;
+}
+
+.columns.align-top h1,
+.columns.align-top h2,
+.columns.align-top h3,
+.columns.align-top h4,
+.columns.align-top h5,
+.columns.align-top h6 {
+  margin: 0;
+}
 
 @media (width >= 900px) {
   .columns > div {

blocks/footer/footer.css

@@ -6,7 +6,7 @@ footer {
 
 footer .footer {
   max-width: 1200px;
-  margin: right;
+  margin: auto;
 }
 
 footer .footer p {

blocks/hero/hero.css

@@ -51,6 +51,7 @@ main .hero-container {
   height: 100%;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
+  position: relative;
 }
 
 .hero-text-content {
@@ -131,3 +132,9 @@ main .hero-container {
     opacity: 0.8;
   }
 }
+
+.hero.text-top .hero-text-content {
+  position: static;
+  transform: unset;
+
+}

blocks/hero/hero.js

@@ -0,0 +1,20 @@
+import { createOptimizedPicture } from "../../scripts/aem.js";
+
+export default async function decorate(block) {
+  const picture = block.querySelector('picture');
+
+  if (picture) {
+    const imageURL = picture.querySelector('img').src;
+    const imgEl = createOptimizedPicture(imageURL, '', true, [{ width: '2000' }]);
+    const backgroundSrc = imgEl.querySelector('img').src;
+    const heroEl = picture.closest('.hero');
+
+    heroEl.style.backgroundImage = `url(${backgroundSrc})`;
+    picture.parentElement.remove();
+
+    const contentWrapEl = heroEl.querySelector('& > div')
+    contentWrapEl.classList.add('hero-content-wrapper');
+    const contentEl = heroEl.querySelector('& > div > div');
+    contentEl.classList.add('hero-text-content');
+  }
+}

scripts/scripts.js

@@ -10,34 +10,10 @@ import {
   waitForLCP,
   loadBlocks,
   loadCSS,
-  createOptimizedPicture,
 } from './aem.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 
-/**
- * Builds hero block and prepends to main in a new section.
- * @param {Element} main The container element
- */
-function buildHeroBlock(main) {
-  const picture = main.querySelector('.hero picture');
-
-  if (picture) {
-    const imageURL = picture.querySelector('img').src;
-    const imgEl = createOptimizedPicture(imageURL, '', true, [{ width: '2000' }]);
-    const backgroundSrc = imgEl.querySelector('img').src;
-    const heroEl = picture.closest('.hero');
-
-    heroEl.style.backgroundImage = `url(${backgroundSrc})`;
-    picture.parentElement.remove();
-
-    const contentWrapEl = heroEl.querySelector('& > div')
-    contentWrapEl.classList.add('hero-content-wrapper');
-    const contentEl = heroEl.querySelector('& > div > div');
-    contentEl.classList.add('hero-text-content');
-  }
-}
-
 /**
  * load fonts.css and set a session storage flag
  */
@@ -56,7 +32,7 @@ async function loadFonts() {
  */
 function buildAutoBlocks(main) {
   try {
-    buildHeroBlock(main);
+    /* add autoblock functions here */
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);

styles/styles.css

@@ -262,3 +262,11 @@ h2 {
       line-height: 2.75rem;
   }
 }
+
+.section.gray-bg {
+  background-color: #f7f7f7;
+}
+
+.block a.button {
+  padding: 0;
+}