some changes

site/layouts/partials/hero.html

@@ -10,7 +10,7 @@
           <div class="anim-block__img" style="background-image: url(/img/img.jpg)"></div>
         </div>
 
-        <div class="js-block c-block c-block--2 hero-block-2">
+        <div class="js-block anim-block anim-block--2 hero-block-2">
           <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
         </div>
 

src/css/imports/components/block.scss

@@ -14,18 +14,19 @@ $unit-size: 100% / $units;
     width: $unit-size;
     height: $unit-size;
     transform-origin: 0 0;
-    transition: transform 0.3s linear;
+    transition: transform 0.4s ease-in-out;
   }
 }
 
 // all blocks start out at 1 unit size in length and width.
 // $x, $y are the starting coordinates
-@mixin ab-set-layout($x, $y) {
+@mixin ab-set-layout($x: 0, $y: 0, $color: rgba(0, 0, 0, 0.5)) {
   @extend %ab-layout;
 
   &::before {
     left: $x * $unit-size;
     top: $y * $unit-size;
+    background-color: $color;
   }
 }
 
@@ -44,15 +45,19 @@ $unit-size: 100% / $units;
 }
 
 .anim-block--1 {
-  @include ab-set-layout(2, 1);
+  @include ab-set-layout(2, 1, blue);
 
   @include ab-set-state(0, 1, 1);
   @include ab-set-state(1, 2, 2);
   @include ab-set-state(2, 2, 3);
-
-  @at-root &::before {
-    background-color: rgba(blue, 0.8);
 }
+
+.anim-block--2 {
+  @include ab-set-layout(1, 1, red);
+
+  @include ab-set-state(0, 1, 1);
+  @include ab-set-state(1, 2, 2);
+  @include ab-set-state(2, 2, 3);
 }
 
 // vim:set filetype=scss:

src/css/imports/hero.scss

@@ -176,8 +176,8 @@
   }
 
   .hero-block-2 {
-    grid-column: 5/8;
+    grid-column: 1/5;
-    grid-row: 1/5;
+    grid-row: 5/9;
   }
 
   .hero-block-3 {

src/index.js

@@ -19,7 +19,7 @@ function initBlocks() {
     let state = 0;
     blockParent.classList.add(`state-${state}`);
 
-    document.querySelector("header").addEventListener("click", () => {
+    document.getElementById("js-block-parent").addEventListener("click", () => {
       const from = state;
       blockParent.classList.remove(`state-${state}`);
       state = state < 2 ? state + 1 : 0;