Fix linting

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;
 }

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,15 +95,15 @@ 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;
   align-items: center;
   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;

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');

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) {

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;