diff --git a/_includes/toolkit-hero-refresh.html b/_includes/toolkit-hero-refresh.html
index a80124976..ebc012f19 100644
--- a/_includes/toolkit-hero-refresh.html
+++ b/_includes/toolkit-hero-refresh.html
@@ -21,7 +21,7 @@ <h2 class=" padding-1 margin-bottom-5 margin-right-3 bg-red-warm-50v text-center
           </h2>
           {% endfor %}
         </div>
-        <div class="grid-row grid-gap-lg">
+        <div class="grid-row grid-gap-lg flex-justify-center">
           {% assign blurbs = page.intro %}
           {% for content in blurbs %}
           <div class="bg-white margin-3 grid-col-8 tablet:grid-col ">
diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss
index 3c82cfb04..81d7fe458 100644
--- a/css/_uswds-theme-custom-styles.scss
+++ b/css/_uswds-theme-custom-styles.scss
@@ -1686,7 +1686,9 @@ main {
       min-width: 300px;
       padding: 35px;
       .defined-width {
+        @include at-media('tablet') {
         width: 44ch;
+        }
       }
       @media screen and (min-width: 1024px) {
           background-color: white;
diff --git a/pages/topx/intro.md b/pages/topx/intro.md
index c17e952bd..e3fe479d6 100644
--- a/pages/topx/intro.md
+++ b/pages/topx/intro.md
@@ -20,7 +20,7 @@ video-one:
   class: padding-bottom-9 padding-top-8 padding-x-9
   title:
     text: "Why Should I Facilitate a TOP Sprint at My Agency?"
-    class: text-blue-warm-60v padding-left-6
+    class: text-blue-warm-60v tablet:padding-left-6
   video:
     src: https://www.youtube.com/embed/hH5NwCca_5o
     alt-text: "Why Should I Facilitate a TOP Sprint at My Agency?"
@@ -42,7 +42,7 @@ video-two:
   class: padding-bottom-9 padding-top-0 padding-x-9
   title:
     text: "How Do I Facilitate a TOP Sprint?"
-    class: text-blue-warm-60v padding-left-6
+    class: text-blue-warm-60v tablet:padding-left-6
   video:
     src: https://www.youtube.com/embed/z6zl7kSo_GY
     alt-text: "How Do I Facilitate a TOP Sprint?"