diff --git a/components/button.vue b/components/button.vue
index 7de939c..b104984 100644
--- a/components/button.vue
+++ b/components/button.vue
@@ -105,7 +105,7 @@ export default {
   padding: 0 toRem(13);
   border: solid 2px $color_Secondary;
   border-radius: 0.3125rem;
-  @include mini {
+  @include medium {
     border: solid 1.5px $color_Secondary;
   }
   .text {
diff --git a/components/card.vue b/components/card.vue
index 741ff64..93496ce 100644
--- a/components/card.vue
+++ b/components/card.vue
@@ -137,6 +137,20 @@ export default {
   background-size: cover;
   background-repeat: no-repeat;
 }
+
+.description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-flex: 1;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
+.theme__mini-card {
+  .description {
+    -webkit-line-clamp: 2;
+  }
+}
 // ////////////////////////////////////////////////////////////////////// Shared
 .card.type__project,
 .card.type__slider {
@@ -154,8 +168,6 @@ export default {
     border-right: solid 2px $color_Accent;
     @include mini {
       border-right: solid 1.5px $color_Accent;
-    }
-    @include mini {
       width: toRem(53);
       padding: toRem(14) toRem(12);
     }
@@ -236,7 +248,7 @@ export default {
   }
   .button-row {
     :deep(.button) {
-      @include mini {
+      @include medium {
         .text {
           @include fontSize_Mini;
         }
@@ -264,20 +276,32 @@ export default {
 .card.type__slider {
   width: 100%;
   height: 100%;
+  .sidebar {
+    @include small {
+      border-right: solid 1.5px $color_Accent;
+      width: toRem(53);
+      padding: toRem(14) toRem(12);
+    }
+  }
   .sidebar-text {
     @include textOutlineDark;
+    @include small {
+      font-size: toRem(22);
+    }
   }
   .card-content {
     padding-bottom: toRem(17);
-    @include mini {
+    @include small {
       padding-bottom: toRem(5);
+      width: calc(100% - 48px);
     }
   }
   .image {
     width: calc(100% + 2px);
     height: toRem(195);
     margin-bottom: toRem(40);
-    @include mini {
+    @include small {
+      height: toRem(125);
       margin-bottom: toRem(19);
     }
   }
@@ -285,7 +309,7 @@ export default {
   .description,
   .button-row {
     padding: 0 toRem(19);
-    @include mini {
+    @include small {
       padding: 0 0.75rem;
     }
   }
@@ -295,7 +319,7 @@ export default {
     font-family: $font_Primary;
     line-height: leading(36, 24);
     margin-bottom: 1.375rem;
-    @include mini {
+    @include small {
       @include fontSize_Mini; // 14px
       line-height: leading(23, 14);
       margin-bottom: 0.625rem;
@@ -303,13 +327,21 @@ export default {
   }
   .description {
     @include p2;
-    @include mini {
+    @include small {
       @include fontSize_Tiny;
     }
   }
   .button-row {
+    @include small {
+      margin-top: 0;
+    }
     :deep(.button) {
       padding-left: 0;
+      .text {
+        @include small {
+          @include fontSize_Tiny;
+        }
+      }
     }
   }
 }
@@ -318,7 +350,7 @@ export default {
   height: unset;
   padding: toRem(49) 0;
   @include itemDivider;
-  @include mini {
+  @include medium {
     flex-direction: column;
   }
   .sidebar-image {
@@ -326,7 +358,7 @@ export default {
     height: toRem(75);
     border-radius: 50%;
     margin-right: toRem(37);
-    @include mini {
+    @include medium {
       margin-bottom: toRem(13);
     }
   }
@@ -334,17 +366,18 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    max-width: 75%;
   }
   .title {
     @include h3;
     margin-bottom: toRem(3);
-    @include mini {
+    @include medium {
       padding-right: 1rem;
     }
   }
   .description {
     @include p1;
-    @include mini {
+    @include medium {
       padding-right: 1rem;
     }
   }
diff --git a/components/circular-slider.vue b/components/circular-slider.vue
index 073f5b9..9a5d43e 100644
--- a/components/circular-slider.vue
+++ b/components/circular-slider.vue
@@ -276,7 +276,7 @@ export default {
 // ///////////////////////////////////////////////////////////////////// General
 .panel-before {
   height: toRem(690);
-  @include mini {
+  @include small {
     height: toRem(424);
   }
 }
diff --git a/components/deck-of-cards.vue b/components/deck-of-cards.vue
index 40615d1..50b87d9 100644
--- a/components/deck-of-cards.vue
+++ b/components/deck-of-cards.vue
@@ -14,10 +14,6 @@
           :key="`slide-${i}`"
           :class="['slider-card', classlist]">
           <Card :card="card" class="slide-content" />
-          <!--           <div
-            class="content"
-            :style="{ 'background-color': card.color }">
-          </div> -->
         </div>
       </template>
 
@@ -107,7 +103,7 @@ export default {
   height: toRem(565);
   transform: translateX(-50%);
   transition: transform 250ms ease;
-  @include mini {
+  @include small {
     width: toRem(280);
     height: toRem(358);
   }
@@ -116,13 +112,13 @@ export default {
   }
   &.animation-slot-3 {
     transform: translateX(-50%) translateY(45px) rotate(-4deg);
-    @include mini {
+    @include small {
       transform: translateX(-50%) translateY(35px) rotate(-4deg);
     }
   }
   &.animation-slot-5 {
     transform: translateX(-50%) translateY(45px) rotate(4deg);
-    @include mini {
+    @include small {
       transform: translateX(-50%) translateY(35px) rotate(4deg);
     }
   }
@@ -130,7 +126,7 @@ export default {
   &.animation-slot-1,
   &.animation-slot-2 {
     transform: translateX(-50%) translateY(112px) rotate(-9.2deg);
-    @include mini {
+    @include small {
       transform: translateX(-50%) translateY(86px) rotate(-9.2deg);
     }
   }
@@ -138,7 +134,7 @@ export default {
   &.animation-slot-7,
   &.animation-slot-8-or-grt {
     transform: translateX(-50%) translateY(112px) rotate(9.2deg);
-    @include mini {
+    @include small {
       transform: translateX(-50%) translateY(86px) rotate(9.2deg);
     }
   }
@@ -166,7 +162,7 @@ export default {
 
 :deep(.panel-after) {
   padding: 0 toRem(60);
-  @include mini {
+  @include small {
     padding: 0 1rem;
   }
   .title-matter {
diff --git a/components/section-contributors.vue b/components/section-contributors.vue
index 7ca853a..c8d7e46 100644
--- a/components/section-contributors.vue
+++ b/components/section-contributors.vue
@@ -16,7 +16,7 @@
 
     <div class="grid-equalHeight-noGutter">
 
-      <div class="col-7_mi-12">
+      <div class="col-7_md-8_sm-7_mi-12">
         <div class="cta-block">
 
           <div class="typeface">
@@ -45,7 +45,7 @@
         </div>
       </div>
 
-      <div class="col-3_mi-6" data-push-left="off-2_mi-6">
+      <div class="col-3_md-3_sm-3_mi-6" data-push-left="off-2_md-1_sm-2_mi-6">
         <ImageBlock :block="imageblock" />
       </div>
 
@@ -95,7 +95,7 @@ export default {
   align-items: center;
   padding-top: toRem(44);
   padding-bottom: toRem(120);
-  @include mini {
+  @include small {
     padding-bottom: toRem(44);
   }
 }
@@ -115,21 +115,24 @@ export default {
   border-radius: toRem(19);
   padding: toRem(30) toRem(38);
   overflow: hidden;
-  @include mini {
+  @include medium {
+    padding: toRem(30) toRem(30);
+  }
+  @include small {
     padding: toRem(27) toRem(19);
     padding-bottom: toRem(20);
   }
   .typeface {
     width: 100%;
     margin-top: 1.125rem;
-    @include mini {
+    @include small {
       margin-top: 0;
       margin-bottom: 1.875rem;
     }
     :deep(svg) {
       width: toRem(1103);
       transform: translateX(-138px);
-      @include mini {
+      @include small {
         width: toRem(477);
         transform: translateX(-50px);
         height: toRem(45);
@@ -140,7 +143,10 @@ export default {
   .cta {
     display: flex;
     justify-content: space-between;
-    @include mini {
+    @include large {
+      align-items: flex-end;
+    }
+    @include small {
       height: toRem(40);
     }
     .text {
@@ -148,7 +154,10 @@ export default {
       @include fontSize_Huge;
       line-height: leading(52, 36);
       color: $mercury;
-      @include mini {
+      @include large {
+        @include fontSize_Large;
+      }
+      @include small {
         @include fontSize_Small;
       }
       .strong {
@@ -165,8 +174,14 @@ export default {
       transform: scale(1.05);
     }
     :deep(.button) {
-      width: toRem(39);
-      height: toRem(39);
+      @include small {
+        width: toRem(39);
+        height: toRem(39);
+      }
+      svg {
+        width: toRem(39);
+        height: toRem(39);
+      }
     }
   }
 }
diff --git a/components/section-hero.vue b/components/section-hero.vue
index f8f7ddd..b95dad5 100644
--- a/components/section-hero.vue
+++ b/components/section-hero.vue
@@ -2,9 +2,10 @@
   <div class="section-hero-header">
 
     <div class="grid">
-      <div class="col-7_mi-8_ti-9">
-        <div class="statement-of-intent">
-          {{ headerData.statement.toUpperCase() }}
+      <div class="col-7_sm-8_ti-9">
+        <div
+          class="statement-of-intent"
+          v-html="headerData.statement.toUpperCase()">
         </div>
       </div>
     </div>
@@ -110,7 +111,14 @@ export default {
   padding: toRem(30) 0;
   @include h5;
   z-index: 2;
+  @include customMaxMQ ($containerWidth + 4rem) {
+    padding-top: 0;
+  }
+  @include medium {
+    @include fontSize_Medium; // 20
+  }
   @include mini {
+    @include fontSize_Small; // 16
     padding-top: 0.125rem;
     padding-right: 1.5rem;
   }
diff --git a/components/site-footer.vue b/components/site-footer.vue
index 2ba6535..a858799 100644
--- a/components/site-footer.vue
+++ b/components/site-footer.vue
@@ -6,7 +6,7 @@
         <div class="divider"></div>
       </div>
 
-      <div class="col-6_mi-12">
+      <div class="col-6_sm-12">
         <div class="site-footer-logo">
           <div class="statement-of-intent">
             {{ headerData.statement.toUpperCase() }}
@@ -17,7 +17,7 @@
         </div>
       </div>
 
-      <div class="col-5_mi-12" data-push-left="off-1_mi-0">
+      <div class="col-5_sm-12" data-push-left="off-1_sm-0">
         <div class="footer-links">
           <div
             v-for="link in links"
@@ -152,7 +152,7 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-  @include mini {
+  @include small {
     padding: toRem(19) 0;
     @include sectionDivider;
   }
@@ -172,7 +172,7 @@ export default {
   @include fontWeight_Semibold;
   line-height: leading(27, 18);
   letter-spacing: 0.05em;
-  @include mini {
+  @include small {
     padding: 0;
     margin-bottom: toRem(53);
   }
diff --git a/components/site-header.vue b/components/site-header.vue
index f7adfef..d93c0cd 100644
--- a/components/site-header.vue
+++ b/components/site-header.vue
@@ -111,7 +111,7 @@ export default {
 
 .navigation {
   &.desktop {
-    @include mini {
+    @include small {
       display: none;
     }
   }
diff --git a/content/core/index.json b/content/core/index.json
index b47e523..27c9ea6 100644
--- a/content/core/index.json
+++ b/content/core/index.json
@@ -23,11 +23,11 @@
       "col_1": {
         "type": "card_list_block",
         "cols": {
-          "num": "col-12_mi-10_ti-12",
-          "push_left": "off-0_mi-1_ti-0",
+          "num": "col-12_sm-10_ti-12",
+          "push_left": "off-0_sm-1_ti-0",
           "push_right": "off-0"
         },
-        "card_columns": "col-4_mi-12",
+        "card_columns": "col-4_lg-6_sm-12",
         "cards": [
           {
             "type": "project",
@@ -288,18 +288,18 @@
       "col_2": {
         "type": "image_block",
         "cols": {
-          "num": "col-3_mi-6",
-          "push_left": "off-1_mi-3",
-          "push_right": "off-1_mi-3"
+          "num": "col-3_md-6",
+          "push_left": "off-1_md-3",
+          "push_right": "off-1_md-3"
         },
         "src": "/images/warped-grid.svg"
       },
       "col_3": {
         "type": "text_block",
         "cols": {
-          "num": "col-6_mi-10_ti-12",
-          "push_left": "off-0_mi-1_ti-0",
-          "push_right": "off-1_mi-1_ti-0"
+          "num": "col-6_md-10_ti-12",
+          "push_left": "off-0_md-1_ti-0",
+          "push_right": "off-1_md-1_ti-0"
         },
         "description": "Tools, products, and incentive programs designed to drive growth and make data storage on Filecoin more accessible.\n\nThe Network Growth org is focused on increasing the utilization and the usefulness of the Filecoin network. Other teams in our org are focused on individual stakeholders within the network, i.e., focus on the demand side or the supply side of the storage market.\n\nOur team is focused on the market itself - finding ways to drive market making, introducing new tools or programs that enable accelerating deal making and utilization of the network (and helping prove its usefulness / value proposition)."
       }
diff --git a/pages/index.vue b/pages/index.vue
index af570b8..4fdf9fa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -87,6 +87,9 @@ export default {
 :deep(.section-about) {
   margin-bottom: 4rem;
   div[data-block-id="col_1"] {
+    @include medium {
+      margin-bottom: 0 !important;
+    }
     @include mini {
       margin-bottom: 1.625rem !important;
     }
@@ -109,22 +112,22 @@ export default {
     }
   }
   .image-block {
-    @include mini {
+    @include medium {
       margin-bottom: 2rem;
     }
   }
 }
 
 :deep(.section-articles) {
-  @include mini {
+  @include small {
     margin-bottom: 0;
   }
   .text-block {
-    @include mini {
+    @include small {
       align-items: center;
     }
     .heading {
-      @include mini {
+      @include small {
         margin-bottom: toRem(7);
       }
     }
@@ -132,13 +135,13 @@ export default {
       display: flex;
       margin-top: 0;
       margin-bottom: 1.25rem;
-      @include mini {
+      @include small {
         margin-bottom: 0;
       }
       .button {
         .text {
           margin-right: toRem(11);
-          @include mini {
+          @include small {
             @include fontSize_Mini;
           }
         }
@@ -147,7 +150,7 @@ export default {
             transform: translateX(0.75rem);
           }
         }
-        @include mini {
+        @include small {
           &:after {
             width: 1rem;
             height: 0.625rem;
@@ -160,7 +163,7 @@ export default {
     .column-content {
       position: relative;
       height: toRem(834);
-      @include mini {
+      @include small {
         height: toRem(544);
       }
     }
@@ -172,7 +175,7 @@ export default {
     left: 50%;
     top: 0;
     transform: translateX(-50%);
-    @include mini {
+    @include small {
       padding-top: toRem(39);
       width: toRem(1000);
     }