update

Author: lamontacrook

blocks/cards/cards.css

@@ -1,4 +1,8 @@
 /* default cards css */
+.cards {
+  position: relative;
+  z-index: 1;
+}
 .cards > ul {
   display: grid;
   grid-template-columns: 1fr;

blocks/hero/hero.css

@@ -11,7 +11,7 @@ main .hero-container {
 .hero {
   position: relative;
   padding: 32px;
-  min-height: 275px;
+  min-height: 375px;
 }
 
 .hero h1,
@@ -24,6 +24,7 @@ main .hero-container {
 
 .hero h1 {
   margin-bottom: 0;
+  margin-top: 200px;
 }
 
 .hero h4 {
@@ -33,7 +34,8 @@ main .hero-container {
 
 .hero picture {
   position: absolute;
-  z-index: -1;
+  /* position: fixed;
+  z-index: 1; */
   inset: 0;
   object-fit: cover;
   box-sizing: border-box;

scripts/scripts.js

@@ -1,3 +1,4 @@
+import decorate from '../blocks/hero/hero.js';
 import {
   sampleRUM,
   buildBlock,
@@ -57,6 +58,10 @@ function buildAutoBlocks(main) {
   }
 }
 
+// function decorateButtons(main) {
+//   libDecorateButtons(main);
+// }
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element

styles/styles.css

@@ -208,6 +208,14 @@ main img {
 /* sections */
 main .section {
   padding: 16px;
+  background-color: white;
+  position: relative;
+  z-index: -2;
+}
+
+main .block {
+  position: relative;
+  z-index: 1;
 }
 
 main .main-wrapper .section:not(:first-of-type) {