diff --git a/assets/scss/core/layout-grid.scss b/assets/scss/core/layout-grid.scss
index 3ba8d1e..bb51c5b 100644
--- a/assets/scss/core/layout-grid.scss
+++ b/assets/scss/core/layout-grid.scss
@@ -12,12 +12,14 @@
 .layout {
   position: relative;
   z-index: 100;
+  overflow-x: hidden;
 }
 
 [class~="grid"], [class*="grid-"], [class*="grid_"] {
   width: $gridWidth;
   margin: 0 auto;
   @include gridMaxMQ {
+    width: 100%;
     padding: 0 4.1665%;
   }
   &[class*="-noGutter"] {
diff --git a/assets/scss/theme/typography.scss b/assets/scss/theme/typography.scss
index a0f52a4..3eb58f8 100644
--- a/assets/scss/theme/typography.scss
+++ b/assets/scss/theme/typography.scss
@@ -80,12 +80,16 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(65, 48);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
-    font-size: toRem(30);
-    line-height: leading(43, 30);
+  @include medium {
+    font-size: toRem(36);
+    line-height: leading(48, 36);
     font-weight: 500;
     letter-spacing: 0.03em;
   }
+  @include mini {
+    font-size: toRem(30);
+    line-height: leading(43, 30);
+  }
 }
 
 @mixin h2 { // Roadmap headings
@@ -93,7 +97,7 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(34, 26);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(20);
     line-height: leading(30, 20);
     font-weight: 500;
@@ -106,12 +110,16 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(30, 24);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
-    font-size: toRem(16);
-    line-height: leading(27, 16);
+  @include medium {
+    font-size: toRem(18);
+    line-height: leading(27, 18);
     font-weight: 500;
     letter-spacing: 0.03em;
   }
+  @include mini {
+    font-size: toRem(16);
+    line-height: leading(27, 16);
+  }
 }
 
 @mixin h4 { // Roadmap milestone headings, captions for stats in hero section
@@ -119,7 +127,7 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(30, 16);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(16, 14);
     font-weight: 500;
@@ -132,7 +140,7 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(19, 16);
   font-weight: 500;
   letter-spacing: 0.11em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(16, 14);
     font-weight: 500;
@@ -199,7 +207,7 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(27, 16);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(21, 14);
     font-weight: 600;
diff --git a/components/blocks/accordion-block.vue b/components/blocks/accordion-block.vue
index 67afdbd..abf82ff 100644
--- a/components/blocks/accordion-block.vue
+++ b/components/blocks/accordion-block.vue
@@ -161,6 +161,12 @@ const getIconComponent = (icon) => {
   &.open {
     .accordion-content {
       max-height: toRem(200);
+      @include large {
+        max-height: toRem(228);
+      }
+      @include medium {
+        max-height: toRem(300);
+      }
     }
   }
   &.open,
diff --git a/components/blocks/card-list-block.vue b/components/blocks/card-list-block.vue
index ca7eecc..cd09310 100644
--- a/components/blocks/card-list-block.vue
+++ b/components/blocks/card-list-block.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="card-list-block">
-    <div :class="grid">
+    <div :class="[grid, 'no-padding']">
       <div
         v-for="(card, i) in cards"
         :key="`card-col-${i}`"
-        :class="columns">
+        :class="[columns, 'card-wrapper']">
 
         <Card :card="card" />
 
diff --git a/components/blocks/code-block.vue b/components/blocks/code-block.vue
index dc6692e..1d3eb9a 100644
--- a/components/blocks/code-block.vue
+++ b/components/blocks/code-block.vue
@@ -52,6 +52,9 @@ const lines = computed(() => {
   @include inlineCode;
   margin-bottom: 0.125rem;
   color: $sageGreen;
+  @include medium {
+    margin-bottom: 0;
+  }
   &.heading {
     color: $eastSide;
   }
@@ -59,19 +62,32 @@ const lines = computed(() => {
 
 .code {
   display: inline-block;
+  white-space: nowrap;
   @include inlineCode;
   &.id,
   &.type {
     width: 12%;
+    @include medium {
+      width: 20%;
+    }
   }
   &.path {
     width: 40%;
+    @include medium {
+      width: 60%;
+    }
   }
   &.scan-state {
     width: 21%;
+    @include medium {
+      display: none;
+    }
   }
   &.dag-state {
     width: 16%;
+    @include gridMaxMQ {
+      display: none;
+    }
   }
 }
 </style>
diff --git a/components/blocks/text-block.vue b/components/blocks/text-block.vue
index 5db7480..a91ebfc 100644
--- a/components/blocks/text-block.vue
+++ b/components/blocks/text-block.vue
@@ -122,6 +122,10 @@ export default {
       width: toRem(90);
       height: toRem(90);
       margin-right: toRem(35);
+      @include medium {
+        width: toRem(60);
+        height: toRem(60);
+      }
     }
   }
   span {
diff --git a/components/button/cta.vue b/components/button/cta.vue
index a126353..3cc154c 100644
--- a/components/button/cta.vue
+++ b/components/button/cta.vue
@@ -122,6 +122,7 @@ const props = defineProps({
 }
 
 .button-content {
+  white-space: nowrap;
   @include transitionDefault;
   &.hide {
     opacity: 0;
diff --git a/components/card.vue b/components/card.vue
index 642e75e..6ffa20b 100644
--- a/components/card.vue
+++ b/components/card.vue
@@ -86,30 +86,51 @@ const iconComponent = computed(() => {
   margin: auto;
   display: flex;
   align-items: center;
+  @include large {
+    margin-bottom: 1rem;
+  }
 }
 
 .card.type__vertical {
   padding: toRem(30) toRem(24);
+  @include medium {
+    padding: toRem(24);
+  }
+  @include small {
+    padding: toRem(15);
+  }
   .content {
     position: relative;
     z-index: 2;
   }
   .icon {
     margin-bottom: toRem(45);
+    @include medium {
+      margin-bottom: toRem(15);
+    }
   }
   .title {
     @include h3;
     color: $sageGreen;
     margin-bottom: toRem(25);
+    @include medium {
+      margin-bottom: toRem(10);
+    }
   }
   .description {
     @include p2;
     margin-bottom: toRem(22);
+    @include medium {
+      margin-bottom: 0;
+    }
   }
 }
 
 .card.type__horizontal {
   padding: toRem(32) toRem(24);
+  @include medium {
+    padding: toRem(26) toRem(19);
+  }
   .content {
     position: relative;
     z-index: 2;
@@ -117,10 +138,24 @@ const iconComponent = computed(() => {
     justify-content: space-between;
     align-items: center;
     height: 100%;
+    @include medium {
+      align-items: flex-start;
+    }
   }
   .image {
     padding: 0 toRem(28);
     max-height: toRem(120);
+    @include large {
+      padding: 0;
+      margin-right: 1rem;
+    }
+    @include medium {
+      max-height: toRem(75);
+      margin-left: 1rem;
+    }
+    @include small {
+      margin-left: 0;
+    }
   }
   .text {
     flex-grow: 1;
diff --git a/components/roadmap.vue b/components/roadmap.vue
index 3969607..5c2078f 100644
--- a/components/roadmap.vue
+++ b/components/roadmap.vue
@@ -5,9 +5,9 @@
       v-for="item in items"
       :key="item.heading"
       class="roadmap-item">
-      <div class="grid-noGutter-noBottom">
+      <div class="grid-noGutter-noBottom no-padding">
 
-        <div class="col-4">
+        <div class="col-4_sm-3">
           <div class="heading">
 
             <ZeroButton
@@ -24,7 +24,7 @@
           </div>
         </div>
 
-        <div class="col-8">
+        <div class="col-8_sm-9">
           <div class="roadmap-card">
             <div class="inner-card">
 
@@ -126,6 +126,9 @@ const cta = computed(() => {
   position: relative;
   margin-left: -2rem;
   @include cardPanel(90deg);
+  @include small {
+    margin-left: 1rem;
+  }
 }
 
 .inner-card {
@@ -143,8 +146,13 @@ const cta = computed(() => {
   .title {
     width: 19%;
     min-width: 19%;
+    margin-top: 0.25em;
     @include h4;
     color: $sageGreen;
+    @include medium {
+      width: 29%;
+      min-width: 29%;
+    }
   }
   .content {
     flex-grow: 1;
diff --git a/components/site-footer.vue b/components/site-footer.vue
index 16b8c47..6797824 100644
--- a/components/site-footer.vue
+++ b/components/site-footer.vue
@@ -33,11 +33,11 @@
     <div class="panel-bottom">
       <div class="grid-bottom-noBottom-noGutter">
 
-        <div class="col-3">
+        <div class="col-3_md-2">
           <!-- dummy div -->
         </div>
 
-        <div class="col-4">
+        <div class="col-4_md-5">
           <div class="legal">
             <ZeroButton
               v-for="link in legal.links"
@@ -81,33 +81,65 @@ const legal = computed(() => {
   align-items: center;
   padding: toRem(34) 0;
   height: toRem(234);
+  @include gridMaxMQ {
+    padding-top: toRem(72);
+    height: unset;
+  }
   &:before {
     content: '';
     position: absolute;
     top: 0;
     left: calc(50% - $halfGridWidth - 3rem);
-    width: 100%;
+    width: calc(100% + 10rem);
     height: 100%;
     background-size: 1439px 1200px;
     background-position: 315px -29px;
     background-repeat: no-repeat;
     background-image: url('/images/ring-of-cross-sections-on-angle.png');
+    @include gridMaxMQ {
+      left: 0;
+      width: 100%;
+      height: calc(100% + 10rem);
+      top: -10rem;
+    }
   }
 }
 
+.panel-top,
+.panel-bottom {
+  position: relative;
+  width: 100%;
+}
+
 .site-footer-logo {
+  display: block;
   :deep(svg) {
     @include transitionDefault;
     &:hover {
       transform: scale(1.08);
     }
   }
+  @include medium {
+    width: toRem(95);
+  }
 }
 
 .authors {
   .text {
     @include formFieldText;
     margin-bottom: toRem(28);
+    @include medium {
+      font-size: toRem(14);
+      :deep(a) {
+        font-size: toRem(14);
+      }
+    }
+    :deep(span) {
+      &.green {
+        color: $sageGreen;
+        font-weight: 600;
+      }
+    }
   }
   .logos {
     display: flex;
@@ -125,6 +157,11 @@ const legal = computed(() => {
 
 .legal {
   transform: translateY(-100%);
+  @include medium {
+    display: flex;
+    justify-content: space-between;
+    transform: translate(1rem, calc(-100% + 0.375rem));
+  }
 }
 
 .footer-button {
@@ -134,11 +171,23 @@ const legal = computed(() => {
   color: $sageGreen;
   @include transitionDefault;
   border-bottom: solid 1px rgba($sageGreen, 0);
+  white-space: nowrap;
   &:not(:last-child) {
     margin-right: toRem(47);
+    @include large {
+      margin-right: toRem(27);
+    }
+    @include medium {
+      margin-right: 0;
+      margin-left: auto;
+    }
   }
   &:hover {
     border-bottom: solid 1px rgba($sageGreen, 1);
   }
+  @include medium {
+    margin-right: 0;
+    margin-left: auto;
+  }
 }
 </style>
diff --git a/components/site-header.vue b/components/site-header.vue
index a29df30..0f5d0a7 100644
--- a/components/site-header.vue
+++ b/components/site-header.vue
@@ -17,17 +17,17 @@
     <!-- =========================================================== Desktop -->
     <div class="grid-noGutter-noBottom main-content">
 
-      <div class="col-3">
+      <div class="col-3_md-2">
         <NuxtLink to="/" class="logo">
           <SiteLogo />
         </NuxtLink>
       </div>
 
-      <div class="col-4" data-push-left="off-2">
+      <div class="col-4_md-5" data-push-left="off-2_md-1">
         <Navbar :links="navigation" class="desktop" />
       </div>
 
-      <div class="col-3">
+      <div class="col-3_md-4">
 
         <div class="nav-ctas">
           <ButtonCta
@@ -142,6 +142,12 @@ const getCtaComponent = (icon) => {
 
 .main-content {
   position: relative;
+  @include medium {
+    margin: 0 -1rem;
+  }
+  @include small {
+    margin: 0;
+  }
 }
 
 .logo {
@@ -152,6 +158,20 @@ const getCtaComponent = (icon) => {
   &:focus-visible {
     transform: scale(1.08);
   }
+  @include medium {
+    transform: translateX(-1rem);
+    &:hover,
+    &:focus-visible {
+      transform: translateX(-1rem) scale(1.08);
+    }
+  }
+  @include small {
+    transform: none;
+    &:hover,
+    &:focus-visible {
+      transform: scale(1.08);
+    }
+  }
   :deep(svg) {
     path {
       transition: 250ms ease;
@@ -171,6 +191,17 @@ const getCtaComponent = (icon) => {
 :deep(.navbar) {
   &.desktop {
     margin-right: 0.5rem;
+    @include gridMaxMQ {
+      margin-right: 1rem;
+      margin-left: -2rem;
+    }
+    @include large {
+      margin-right: 1.5rem;
+      margin-left: -4.5rem;
+    }
+    @include medium {
+      margin: 0;
+    }
     @include small {
       display: none;
     }
@@ -183,6 +214,19 @@ const getCtaComponent = (icon) => {
   height: 100%;
   align-items: center;
   padding: 0 toRem(28);
+  @include gridMaxMQ {
+    padding: 0;
+    justify-content: flex-end;
+    :deep(.button) {
+      margin-left: 0.75rem;
+    }
+  }
+  @include medium {
+    transform: translateX(1rem);
+  }
+  @include small {
+    transform: unset;
+  }
 }
 
 .desktop,
diff --git a/components/subfooter-card.vue b/components/subfooter-card.vue
index b096d90..5d52a19 100644
--- a/components/subfooter-card.vue
+++ b/components/subfooter-card.vue
@@ -4,11 +4,11 @@
     :style="cardStyles">
 
     <div class="card-content">
-      <div class="grid-noGutter-noBottom-middle">
+      <div class="grid-noGutter-noBottom-middle no-padding">
 
         <div
-          :class="fullwidth ? 'col-6' : 'col-12'"
-          :data-push-left="fullwidth ? 'off-1' : 'off-0'">
+          :class="[fullwidth ? 'col-6_md-7' : 'col-12', 'inner-column']"
+          :data-push-left="fullwidth ? 'off-1_md-0' : 'off-0'">
           <div class="before">
 
             <div class="feature">
@@ -18,10 +18,23 @@
               </pre>
             </div>
 
-            <div
-              v-if="title"
-              class="title"
-              v-html="title">
+            <div class="title-wrapper">
+
+              <div
+                v-if="title"
+                class="title"
+                v-html="title">
+              </div>
+
+              <div v-if="!fullwidth && cta" class="cta">
+                <ButtonCta
+                  :to="cta.to"
+                  :tag="cta.tag"
+                  theme="secondary">
+                  {{ cta.text }}
+                </ButtonCta>
+              </div>
+
             </div>
 
             <div
@@ -30,19 +43,10 @@
               v-html="subheading">
             </div>
 
-            <div v-if="!fullwidth && cta" class="cta">
-              <ButtonCta
-                :to="cta.to"
-                :tag="cta.tag"
-                theme="secondary">
-                {{ cta.text }}
-              </ButtonCta>
-            </div>
-
           </div>
         </div>
 
-        <div v-if="fullwidth" class="col-5">
+        <div v-if="fullwidth" class="col-5 inner-column">
           <div class="after">
 
             <div class="description">
@@ -124,12 +128,28 @@ const cardStyles = computed(() => {
   height: 100%;
   [class~="grid"], [class*="grid-"], [class*="grid_"] {
     width: 100% !important;
+    height: 100%;
+  }
+  @include medium {
+    padding: toRem(23);
   }
 }
 
 .card-content {
   position: relative;
   z-index: 2;
+  height: 100%;
+}
+
+.inner-column {
+  height: 100%;
+}
+
+.before {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100%;
 }
 
 .feature {
@@ -144,6 +164,9 @@ const cardStyles = computed(() => {
     background-color: $codeBlack;
     border-radius: toRem(5);
     margin: 0;
+    @include medium {
+      padding: 0 toRem(20);
+    }
   }
   code {
     display: block;
@@ -151,6 +174,9 @@ const cardStyles = computed(() => {
     line-height: leading(27, 18);
     letter-spacing: 0.01em;
     color: $sageGreen;
+    @include large {
+      font-size: toRem(13);
+    }
     :deep(span) {
       &.blue {
         color: #5D9AD1;
@@ -178,13 +204,31 @@ const cardStyles = computed(() => {
   letter-spacing: 0.01em;
 }
 
+.subheading {
+  @include medium {
+    font-size: toRem(16);
+  }
+}
+
 .subfooter-card.fullwidth {
+  @include medium {
+    padding: toRem(50) toRem(28) toRem(33) toRem(28);
+  }
+  @include small {
+    padding: toRem(50) toRem(23) toRem(33) toRem(23);
+  }
   .before {
     position: relative;
     margin-left: -2rem;
+    @include medium {
+      margin: 0;
+    }
   }
   .after {
     padding: 0 toRem(40);
+    @include medium {
+      padding: 0;
+    }
   }
   .feature {
     display: none;
@@ -194,16 +238,25 @@ const cardStyles = computed(() => {
     line-height: leading(110, 80);
     white-space: nowrap;
     margin-bottom: toRem(10);
+    @include gridMaxMQ {
+      font-size: 5.8vw;
+    }
     :deep(img) {
       display: inline;
-      max-width: toRem(214);
+      width: toRem(214);
       margin-right: toRem(42);
       transform: translateY(0.75rem);
+      @include gridMaxMQ {
+        width: 16.2vw;
+      }
     }
   }
   .description {
     line-height: leading(27, 18);
     margin-bottom: toRem(30);
+    @include medium {
+      @include p2;
+    }
   }
 }
 </style>
diff --git a/content/core/general.json b/content/core/general.json
index 2cbe9e1..f2c7a01 100644
--- a/content/core/general.json
+++ b/content/core/general.json
@@ -58,7 +58,7 @@
   },
   "footer": {
     "authors": {
-      "text": "Singularity is a project developed by the <a href='https://dataprograms.org/' target='_blank'>Data Programs Working Group</a> with Protocol Labs"
+      "text": "<span class='green'>Singularity</span> is a project developed by the <a href='https://dataprograms.org/' target='_blank'>Data Programs Working Group</a> with Protocol Labs"
     },
     "legal": {
       "links": [
diff --git a/content/core/index.json b/content/core/index.json
index 8f6b2fd..2494907 100644
--- a/content/core/index.json
+++ b/content/core/index.json
@@ -16,7 +16,7 @@
       "col_1": {
         "type": "text_block",
         "cols": {
-          "num": "col-5"
+          "num": "col-5_md-6"
         },
         "h": 1,
         "heading": "Seamlessly onboard <span class='highlight'>PiB scale</span> data to the Filecoin storage network",
@@ -40,7 +40,7 @@
         "type": "custom",
         "cols": {
           "num": "col-6",
-          "push_left": "off-1"
+          "push_left": "off-1_md-0"
         },
         "customizations": [
           {
@@ -135,7 +135,7 @@
             "props": {
               "block": {
                 "card_grid": ["noGutter", "noBottom", "middle"],
-                "card_columns": "col-2",
+                "card_columns": "col-2_lg-4",
                 "cards": [
                   {
                     "type": "logo",
@@ -464,7 +464,7 @@
     },
     {
       "id": "section-subfooter",
-      "grid": ["equalHeight"],
+      "grid": ["equalHeight", "noGutter"],
       "col_1": {
         "type": "subfooter_card",
         "cols": {
diff --git a/pages/index.vue b/pages/index.vue
index 9164cc9..d23fa30 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -76,14 +76,29 @@ const sections = computed(() => {
   }
   div[data-block-id="col_1"] {
     .text-block {
+      @include medium {
+        margin-right: 2rem;
+      }
+      .heading {
+        @include medium {
+          margin-bottom: toRem(17);
+        }
+      }
       .description {
         padding-right: toRem(50);
         margin-bottom: toRem(43);
+        @include medium {
+          margin-bottom: toRem(27);
+        }
       }
       .theme__caption {
         margin-top: 1rem;
         .button-content {
           @include disclaimerText;
+          white-space: normal;
+          @include medium {
+            padding-right: 4rem;
+          }
         }
       }
     }
@@ -91,15 +106,27 @@ const sections = computed(() => {
   .code-block,
   .card-list-block {
     margin-left: toRem(-50);
+    @include medium {
+      margin: 0;
+    }
+    @include small {
+      margin-left: -1rem;
+    }
   }
   .code-block {
     margin-bottom: toRem(48);
+    @include medium {
+      margin-bottom: toRem(27);
+    }
   }
   div[data-block-id="col_2"] {
     .text-block {
       .button-row {
         display: flex;
         justify-content: flex-end;
+        @include large {
+          transform: translateY(-1rem);
+        }
       }
     }
   }
@@ -120,15 +147,39 @@ const sections = computed(() => {
     background-size: 2000px;
     background-position: center top;
     background-repeat: no-repeat;
+    @include medium {
+      background-size: 1750px;
+    }
   }
   .text-block {
     .button-row {
       display: flex;
     }
   }
+  .card-list-block {
+    @include medium {
+      margin: 0 -0.5rem;
+    }
+    .card-wrapper {
+      @include medium {
+        &:nth-child(1),
+        &:nth-child(4) {
+          .card {
+            height: calc(100% - 2.5rem);
+          }
+        }
+        &:nth-child(3) {
+          transform: translateY(-2.5rem);
+        }
+      }
+    }
+  }
 }
 
 :deep(#section-features) {
+  @include medium {
+    padding-top: toRem(35);
+  }
   div[data-block-id="col_2"] {
     .accordion-block {
       margin-right: toRem(9);
@@ -148,11 +199,35 @@ const sections = computed(() => {
       }
     }
   }
+  .accordion-block {
+    .accordion-heading {
+      .icon {
+        @include medium {
+          margin-right: 1rem;
+        }
+      }
+      .h3 {
+        @include large {
+          font-size: toRem(16);
+          line-height: leading(27, 16);
+        }
+      }
+    }
+  }
+}
+
+:deep(#section-how-it-works) {
+  @include medium {
+    padding-top: 0.875rem;
+  }
 }
 
 :deep(#section-roadmap) {
   div[data-block-id="col_1"] {
     margin-bottom: toRem(45);
+    @include medium {
+      margin-bottom: toRem(15);
+    }
   }
 }
 
@@ -165,12 +240,35 @@ const sections = computed(() => {
     top: toRem(-68);
     left: calc(50% - $halfGridWidth - 3rem);
     width: toRem(1400);
-    height: calc(100% + toRem(68) + toRem(234));
+    height: calc(toRem(866) + toRem(68) + toRem(234)); // section height + top displacement + footer height
     background-image: url('/images/ring-of-cross-sections-from-above.png');
     background-size: 1300px;
     background-position: center top;
     background-repeat: no-repeat;
     transform: translateX(calc(-50% - 3rem));
+    @include gridMaxMQ {
+      top: toRem(-200);
+      height: calc(toRem(960) + toRem(68) + toRem(234));
+    }
+    @include medium {
+      height: calc(toRem(900) + toRem(68) + toRem(234));
+    }
+  }
+  div[data-block-id="col_1"],
+  div[data-block-id="col_2"] {
+    padding-bottom: toRem(12);
+  }
+  div[data-block-id="col_1"] {
+    .column-content{
+      margin-right: 0.5rem;
+      width: calc(100% - 0.5rem);
+    }
+  }
+  div[data-block-id="col_2"] {
+    .column-content{
+      margin-left: 0.5rem;
+      width: calc(100% - 0.5rem);
+    }
   }
 }
 </style>