diff --git a/.gitignore b/.gitignore
index c37e42b4..4346e32e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
 node_modules
 dist
-config.codekit3
\ No newline at end of file
+config.codekit3
+.cache
\ No newline at end of file
diff --git a/11ty/index.njk b/11ty/index.njk
index 00b0828b..4e2f1cee 100644
--- a/11ty/index.njk
+++ b/11ty/index.njk
@@ -3,10 +3,8 @@ layout: layouts/index.njk
 ---
 
 <section id="introduction" class="auto-grid">
-      <div id="title">
-        <h1 class="title__thicc">Self-Defined</h1>
-        <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
-      </div>
+      <h1 class="title__thicc" id="title">Self-Defined</h1>
+      <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
       <div>
         <p class="summary">
           Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the diverse perspectives of the modern world.
diff --git a/assets/css/base.scss b/assets/css/base.scss
index fa5edc53..58cd1f0b 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -138,15 +138,41 @@ ul[class] {
 }
 
 .title__thicc {
-  font-size: 8vh;
+  // a sensible base font size
+  font-size: 3rem;
   line-height: 0.75;
   padding: 0;
   margin: 0.5rem 0rem;
-  grid-column: span 2;
   // transform: rotateZ(90deg);
   // margin: 13rem -7rem;
 }
 
+@media (min-width: 51rem) and (min-height: 400px) {
+  // a dramatic font size
+  .title__thicc {
+    font-size: 12vh;
+  } 
+}
+
+@media (min-width: 51rem) and (min-height: 850px) {
+  // cap the max-height of the title
+  // at the same size that 12vh computes to
+  // when the viewport is 850px high
+  .title__thicc {
+    font-size: 6.75rem;
+  } 
+}
+
+@media (min-width: 800px) {
+  .title__thicc {
+      grid-column: 1 / 3;
+  }
+
+  .title__thicc + p {
+    grid-column: 1 / 2;
+  }
+}
+
 .help {
   margin: 1rem 0;
   li {