diff --git a/src/css/imports/blocks.scss b/src/css/imports/blocks.scss
deleted file mode 100644
index 3919ca1..0000000
--- a/src/css/imports/blocks.scss
+++ /dev/null
@@ -1,232 +0,0 @@
-$duration: 1s;
-$delay: 0.3s;
-
-$transition-img-in: opacity $duration $delay ease-in, transform $duration;
-$transition-img-out: opacity $duration $delay ease-out, transform $duration;
-
-@mixin img-in {
-  transition: $transition-img-in;
-  opacity: 0.5;
-  transform: none;
-}
-
-@mixin img-out {
-  transition: $transition-img-out;
-}
-
-.c-block::before,
-.c-block__img {
-  @include abs-full;
-}
-
-.c-block {
-  z-index: 1;
-  position: relative;
-  overflow: hidden;
-
-  width: 100%;
-  height: 100%;
-
-  &::before {
-    //will-change: transform;
-    z-index: 1;
-    content: "";
-    transition: transform $duration;
-    background-color: currentColor;
-  }
-
-  > .c-block__img {
-    z-index: 2;
-    //will-change: opacity, transform;
-    background-size: cover;
-    background-position: center;
-    opacity: 0;
-  }
-}
-
-.c-block--1 {
-  &::before {
-    transform-origin: 100% 100%;
-
-    @at-root .state-0 & {
-      transform: scale(1, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.5, 1);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 0.5);
-    }
-  }
-
-  > .c-block__img {
-    transform-origin: 0 0;
-
-    @at-root .state-0 & {
-      @include img-in;
-    }
-
-    @at-root .state-1 & {
-      @include img-out;
-      transform: translate(50%, 0) scale(1.3);
-    }
-
-    @at-root .state-2 & {
-      transform: translate(50%, 50%) scale(2);
-    }
-  }
-}
-
-.c-block--2 {
-  &::before {
-    transform-origin: 100% 0;
-
-    @at-root .state-0 & {
-      transform: scale(0.5, 0.5);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(1, 1);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 1);
-    }
-  }
-
-  > .c-block__img {
-    transform-origin: 0 100%;
-
-    @at-root .state-0 & {
-      transform: translate(50%, 50%) scale(2);
-    }
-
-    @at-root .state-1 & {
-      @include img-in;
-    }
-
-    @at-root .state-2 & {
-      transform: translate(50%, 0) scale(1.3);
-      @include img-out;
-    }
-  }
-}
-
-.c-block--3 {
-  &::before {
-    transform-origin: 100% 0;
-
-    @at-root .state-0 & {
-      transform: scale(0.5, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.5, 0.5);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(1, 1);
-    }
-  }
-
-  > .c-block__img {
-    transform-origin: 0 100%;
-
-    @at-root .state-0 & {
-      @include img-out;
-      transform: translate(50%, 0) scale(1.3);
-    }
-
-    @at-root .state-1 & {
-      transform: translate(50%, 50%) scale(2);
-    }
-
-    @at-root .state-2 & {
-      @include img-in;
-    }
-  }
-}
-
-.c-block--4 {
-  &::before {
-    transform-origin: 100% 0;
-
-    @at-root .state-0 & {
-      transform: scale(0.33, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.33, 0.25);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(1, 1);
-    }
-  }
-
-  > .c-block__img {
-    transform-origin: 0 100%;
-
-    @at-root .state-0 & {
-      @include img-out;
-      transform: translate(66.6%, 0) scale(1.3);
-    }
-
-    @at-root .state-1 & {
-      transform: translate(66.6%, 66.6%) scale(2);
-    }
-
-    @at-root .state-2 & {
-      @include img-in;
-    }
-  }
-}
-
-.c-block--5 {
-  &::before {
-    transform-origin: 100% 100%;
-
-    @at-root .state-0 & {
-      transform: scale(1, 1);
-    }
-
-    @at-root .state-1 & {
-      transform: scale(0.5, 1);
-    }
-
-    @at-root .state-2 & {
-      transform: scale(0.5, 0.5);
-    }
-  }
-}
-
-.block-container {
-  position: relative;
-  width: 100%;
-  max-width: 110rem;
-  height: 100%;
-  margin-left: auto;
-  margin-right: auto;
-
-  background-color: rgba(#000, 0.1);
-}
-
-.block-grid {
-  display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  grid-template-columns: 1fr 1fr 1fr;
-
-  .c-block-tr {
-    grid-column: 3/4;
-    grid-row: 1/3;
-  }
-
-  .c-block-br {
-    grid-column: 2/4;
-    grid-row: 3/3;
-  }
-}
-
-// vim:set filetype=scss:
diff --git a/src/css/imports/components/base.scss b/src/css/imports/components/base.scss
index 0ad3db1..c8f2259 100644
--- a/src/css/imports/components/base.scss
+++ b/src/css/imports/components/base.scss
@@ -1,75 +1,3 @@
-// a card
-.c-img-card {
-  $bp-collapse: $bp-s;
-
-  z-index: 1;
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-
-  &__body {
-    padding: 32px 48px;
-  }
-
-  &__body-bg {
-    z-index: -1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-
-  @media (max-width: $bp-collapse) {
-    &__header,
-    &__body,
-    &__body-bg {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-    }
-
-    &__header {
-      z-index: -1;
-    }
-
-    &__body {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-    }
-
-    &__body-bg {
-      opacity: 0.6;
-    }
-  }
-
-  @media (min-width: $bp-collapse) {
-    display: flex;
-    flex-direction: column;
-
-    &__header,
-    &__body {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    &__header {
-      flex: 0 1 50%;
-    }
-
-    &__body {
-      position: relative;
-      flex: 1 0 50%;
-    }
-
-    &__body-bg {
-      opacity: 1;
-    }
-  }
-}
+@import "block";
+@import "card";
+@import "menu-toggle";
diff --git a/src/css/main.css b/src/css/main.css
index 7c38165..9d8dc77 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -9,7 +9,6 @@
 @import "imports/base.scss";
 @import "imports/layout.scss";
 @import "imports/utility.scss";
-@import "imports/blocks.scss";
 
 @import "imports/components/base.scss";
 
@@ -339,6 +338,35 @@ html.is-animating .transition-fade {
   margin-bottom: 1.25rem;
 }
 
+// hero
+
+.block-container {
+  position: relative;
+  width: 100%;
+  max-width: 110rem;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+
+  background-color: rgba(#000, 0.1);
+}
+
+.block-grid {
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .c-block-tr {
+    grid-column: 3/4;
+    grid-row: 1/3;
+  }
+
+  .c-block-br {
+    grid-column: 2/4;
+    grid-row: 3/3;
+  }
+}
+
 // global
 
 .site-title {