diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css
index c6e74dd24..2cfcaf6cd 100644
--- a/public/css/sub-pages.css
+++ b/public/css/sub-pages.css
@@ -1086,9 +1086,9 @@ main#main {
 }
 
 .skill-demo-caption {
-  font-size: 0.875rem;
-  color: var(--color-charcoal);
-  margin-top: var(--spacing-md);
+  font-size: 0.8125rem;
+  color: var(--color-ash);
+  margin-top: 12px;
   font-style: italic;
   max-width: 500px;
 }
diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js
index 4d5e61db5..3b5c8d192 100644
--- a/scripts/build-sub-pages.js
+++ b/scripts/build-sub-pages.js
@@ -54,8 +54,8 @@ function renderSkillDemo(skill) {
       <span class="split-label-item" data-point="before">Before</span>
       <span class="split-label-item" data-point="after">After</span>
     </div>
+    ${caption ? `<p class="skill-demo-caption">${escapeHtml(caption)}</p>` : ''}
   </div>
-  ${caption ? `<p class="skill-demo-caption">${escapeHtml(caption)}</p>` : ''}
 </section>`;
 }