diff --git a/examples/article.html b/examples/article.html
index 47e8b37..8131ad0 100644
--- a/examples/article.html
+++ b/examples/article.html
@@ -2,6 +2,7 @@
 
 <head>
   <meta charset="utf8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="../dist/template.v2.js"></script>
 </head>
 
diff --git a/src/components/d-abstract.js b/src/components/d-abstract.js
index 63c364f..8106a1d 100644
--- a/src/components/d-abstract.js
+++ b/src/components/d-abstract.js
@@ -7,7 +7,7 @@ const T = Template('d-abstract', `
     display: block;
     font-size: 1.2rem;
     line-height: 1.8em;
-    margin-bottom: 1.5em;
+    padding-bottom: 1.5em;
     color: rgba(0, 0, 0, 0.8);
     font-weight: 300;
     font-family: "Merriweather", georgia, serif;
@@ -16,7 +16,7 @@ const T = Template('d-abstract', `
   ::slotted(p) {
     margin-top: 0;
     margin-bottom: 0;
-    grid-column: text-start / span 9;
+    grid-column: text-start / middle-end;
   }
   ${body('d-abstract')}
 </style>
diff --git a/src/components/d-article.js b/src/components/d-article.js
index 8c132ea..1c708c2 100644
--- a/src/components/d-article.js
+++ b/src/components/d-article.js
@@ -55,7 +55,7 @@ d-article .marker:hover span {
 }
 
 d-article h2 {
-  grid-column-end: span 10;
+  grid-column-end: page-end;
   font-weight: 700;
   font-size: 24px;
   line-height: 1.25em;
diff --git a/src/components/d-byline.js b/src/components/d-byline.js
index 50ca8c0..a5a829f 100644
--- a/src/components/d-byline.js
+++ b/src/components/d-byline.js
@@ -8,8 +8,8 @@ d-byline {
 }
 
 d-byline .byline {
-  grid-template-columns: repeat(5, 1fr);
-  grid-column: text-start / page-end;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column: text;
 }
 
 d-byline h3 {
diff --git a/src/components/d-title.js b/src/components/d-title.js
index 5486a96..c1869f5 100644
--- a/src/components/d-title.js
+++ b/src/components/d-title.js
@@ -3,7 +3,7 @@ import { Template } from '../mixins/template';
 const T = Template('d-title', `
 <style>
   :host {
-    margin-top: 64px;
+    padding-top: 64px;
     contain: content;
     display: block;
   }
@@ -15,11 +15,11 @@ const T = Template('d-title', `
     margin: 0 0 10px;
   }
   .status {
+    margin-top: 15px;
     font-size: 12px;
     color: #009688;
-    opacity: 0.7;
+    opacity: 0.8;
     grid-column: kicker;
-    margin-top: 19px;
   }
   .status span {
     line-height: 1;
diff --git a/src/styles/styles-layout.css b/src/styles/styles-layout.css
index 004dc00..849e685 100644
--- a/src/styles/styles-layout.css
+++ b/src/styles/styles-layout.css
@@ -20,18 +20,11 @@ d-footnote-list,
 distill-footer {
   display: grid;
   justify-items: stretch;
+  grid-template-columns: [screen-start] 0.5fr [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 0.5fr [screen-end];
+  grid-column-gap: 30px;
 }
-/*
-@media(min-width: 768px) {
 
-  d-article,
-  d-appendix,
-  d-byline,
-  distill-footer {
-    grid-template-columns: [start] 32px [left-outset] 32px [left] 3fr [text] 32px [text-outset] 1fr [page] 32px [page-outset] 32px [end];
-  }
-}*/
-/* @media(min-width: 768px) {
+@media(min-width: 768px) {
   d-title,
   d-abstract,
   d-article,
@@ -39,12 +32,12 @@ distill-footer {
   d-byline,
   d-footnote-list,
   distill-footer {
-    grid-template-columns:  [screen-start] 0 [page-start] 1fr [text-start] 1fr 1fr 1fr 1fr [text-end] 1fr [page-end] 0 [screen-end];
+    grid-template-columns: [screen-start] 1fr [page-start kicker-start middle-start text-start] 45px 45px 45px 45px 45px 45px 45px 45px [ kicker-end text-end gutter-start] 45px [middle-end] 45px [page-end gutter-end] 1fr [screen-end];
     grid-column-gap: 30px;
   }
-} */
+}
 
-@media(min-width: 1060px) {
+@media(min-width: 1000px) {
   d-title,
   d-abstract,
   d-article,
@@ -52,8 +45,20 @@ distill-footer {
   d-byline,
   d-footnote-list,
   distill-footer {
-    grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px 50px [page-end gutter-end] 1fr [screen-end];
-    /* grid-template-columns:  [screen-start] 1fr [page-start] 130px [text-start] 130px 130px 130px 130px [text-end] 130px [page-end] 1fr [screen-end]; */
+    grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px [middle-start] 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px [middle-end] 50px [page-end gutter-end] 1fr [screen-end];
+    grid-column-gap: 30px;
+  }
+}
+
+@media(min-width: 1200px) {
+  d-title,
+  d-abstract,
+  d-article,
+  d-appendix,
+  d-byline,
+  d-footnote-list,
+  distill-footer {
+    grid-template-columns: [screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] 60px 60px 60px 60px 60px 60px 60px 60px [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end];
     grid-column-gap: 30px;
   }
 }
