fix column issues

blocks/columns/columns.css

@@ -8,10 +8,14 @@
   width: 100%;
 }
 
-.columns > div > div:not(.columns-img-col) {
+.columns > div > div {
   order: 1;
+}
+
+.columns > div > div:not(.columns-img-col) {
   max-width: 750px;
-  margin: auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .columns > div > .columns-img-col {
@@ -54,11 +58,11 @@
   }
 
   .columns.grid > div .col-wide {
-    flex-basis: 45%;
+    flex-basis: 48%;
   }
 
   .columns.grid > div .col-narrow {
-    flex-basis: 30%;
+    flex-basis: 31%;
   }
 }
 

scripts/scripts.js

@@ -1,5 +1,4 @@
 import {
-  buildBlock,
   loadHeader,
   loadFooter,
   decorateButtons,
@@ -15,21 +14,6 @@ import {
   fetchPlaceholders,
 } from './aem.js';
 
-/**
- * Builds hero block and prepends to main in a new section.
- * @param {Element} main The container element
- */
-function buildHeroBlock(main) {
-  const h1 = main.querySelector('h1');
-  const picture = main.querySelector('picture');
-  // eslint-disable-next-line no-bitwise
-  if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
-    const section = document.createElement('div');
-    section.append(buildBlock('hero', { elems: [picture, h1] }));
-    main.prepend(section);
-  }
-}
-
 /**
  * load fonts.css and set a session storage flag
  */
@@ -42,19 +26,6 @@ async function loadFonts() {
   }
 }
 
-/**
- * Builds all synthetic blocks in a container element.
- * @param {Element} main The container element
- */
-function buildAutoBlocks(main) {
-  try {
-    buildHeroBlock(main);
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error('Auto Blocking failed', error);
-  }
-}
-
 function customDecorateSections(main) {
   main.querySelectorAll(':scope > div').forEach((section) => {
     // adding the 'heading-with-marker' to section will affect the first heading
@@ -82,7 +53,6 @@ export function decorateMain(main) {
   // hopefully forward compatible button decoration
   decorateButtons(main);
   decorateIcons(main);
-  buildAutoBlocks(main);
   decorateSections(main);
   customDecorateSections(main);
   decorateBlocks(main);

styles/styles.css

@@ -316,4 +316,9 @@ main .border-top {
 
 .button.secondary:any-link:hover {
   color: var(--text-color);
+}
+
+.width-400 {
+  max-width: 400px;
+  margin: auto;
 }