diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
index 28aee32..2db4125 100644
--- a/blocks/columns/columns.css
+++ b/blocks/columns/columns.css
@@ -27,11 +27,14 @@
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 1fr;
-  grid-column-gap: 1.5rem;
-  grid-row-gap: 1.5rem;
+  grid-gap: 1.5rem;
   align-items: stretch;
 }
 
+.columns.align-top > div {
+  align-items: flex-start;
+}
+
 .two-one.columns.bento > div {
   grid-template-columns: 2fr 1fr;
 }
@@ -46,7 +49,7 @@
 
 .columns.bento .text-column {
   padding: 2rem;
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: rgb(0 0 0 / 6%);
 }
 
 .columns.bento .column-with-image div {
@@ -68,16 +71,9 @@
   margin: 0;
   width: 100%;
   height: 100%;
-}
-
-.columns.bento picture {
   object-fit: cover;
 }
 
-.columns.align-top > div {
-  align-items: flex-start;
-}
-
 .columns.align-top .text-column {
   margin-left: 100px;
 }
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 8707612..dc2811d 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -8,8 +8,12 @@ main .hero-container {
 
 .hero {
   position: relative;
-  padding: 32px;
   min-height: 550px;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: calc(-138px + 100vh);
+  padding: 0;
 }
 
 .hero h1 {
@@ -37,14 +41,6 @@ main .hero-container {
   border: 1px solid var(--text-color);
 }
 
-.hero {
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  height: calc(-138px + 100vh);
-  padding: 0;
-}
-
 .hero-content-wrapper {
   max-width: 90rem;
   margin: 0 auto;
@@ -62,7 +58,7 @@ main .hero-container {
   min-width: min-content;
   position: relative;
   transform: translateY(-35%);
-  color: rgb(0, 0, 0);
+  color: rgb(0 0 0);
   display: flex;
   flex-direction: column;
   animation: 1.5s ease-in 0s 1 normal both running hero-text-content-animation;
@@ -73,11 +69,11 @@ main .hero-container {
 .hero-text-content::before {
   content: "";
   position: absolute;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
-  background-color: rgb(255, 255, 255);
+  background-color: rgb(255 255 255);
   animation: 1.5s ease-in 0s 1 normal both running hero-text-content-before-animation;
   z-index: -1;
 }
@@ -99,7 +95,7 @@ main .hero-container {
 }
 
 .hero-text-content a.button {
-  margin: 2.25rem 0 0 0;
+  margin: 2.25rem 0 0;
   padding: 0.3125rem 1.5rem;
   border: 1px solid;
   display: inline-flex;
@@ -107,7 +103,7 @@ main .hero-container {
   font-family: AktivGrotesk, helvetica, arial, sans-serif;
   font-weight: 500;
   background-color: transparent;
-  color: rgb(0, 0, 0);
+  color: rgb(0 0 0);
   font-size: 0.875rem;
   line-height: 1.25rem;
   height: 2.5rem;
diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
index 05792cc..af29a9a 100644
--- a/blocks/hero/hero.js
+++ b/blocks/hero/hero.js
@@ -1,4 +1,4 @@
-import { createOptimizedPicture } from "../../scripts/aem.js";
+import { createOptimizedPicture } from '../../scripts/aem.js';
 
 export default async function decorate(block) {
   const picture = block.querySelector('picture');
@@ -12,7 +12,7 @@ export default async function decorate(block) {
     heroEl.style.backgroundImage = `url(${backgroundSrc})`;
     picture.parentElement.remove();
 
-    const contentWrapEl = heroEl.querySelector('& > div')
+    const contentWrapEl = heroEl.querySelector('& > div');
     contentWrapEl.classList.add('hero-content-wrapper');
     const contentEl = heroEl.querySelector('& > div > div');
     contentEl.classList.add('hero-text-content');
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 37c61b8..d2e42d0 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -30,7 +30,7 @@ async function loadFonts() {
  * Builds all synthetic blocks in a container element.
  * @param {Element} main The container element
  */
-function buildAutoBlocks(main) {
+function buildAutoBlocks() {
   try {
     /* add autoblock functions here */
   } catch (error) {
diff --git a/styles/styles.css b/styles/styles.css
index 09ce2f4..fd15b35 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -234,6 +234,7 @@ main .section.highlight {
   width: 16px;
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 h2 {
   font-family: AktivGrotesk, helvetica, arial, sans-serif;
   font-size: 1.625rem;
@@ -242,21 +243,21 @@ h2 {
   text-transform: inherit;
 }
 
-@media (min-width: 48rem) {
+@media (width >= 48rem) {
   h2 {
       font-size: 1.75rem;
       line-height: 2.25rem;
   }
 }
 
-@media (min-width: 64rem) {
+@media (width >= 64rem) {
   h2 {
       font-size: 2rem;
       line-height: 2.5rem;
   }
 }
 
-@media (min-width: 80rem) {
+@media (width >= 80rem) {
   h2 {
       font-size: 2.25rem;
       line-height: 2.75rem;