Left align hero overlay and archive features to flow better with left aligned layouts

assets/_scss/_archive.scss

@@ -149,7 +149,6 @@ a:hover {
 
   @include breakpoint($small) {
     margin-bottom: 0;
-    text-align: center;
     @include gallery(4 of 12);
 
     .feature__item-teaser {
@@ -158,14 +157,8 @@ a:hover {
     }
   }
 
-  .archive__item-body {
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-  }
-
   &--left {
     @include full();
-    // margin-bottom: 2em;
     font-size: 1.25rem;
 
     .archive__item-teaser {
@@ -187,7 +180,6 @@ a:hover {
 
   &--right {
     @include full();
-    // margin-bottom: 2em;
     font-size: 1.25rem;
 
     .archive__item-teaser {
@@ -211,7 +203,6 @@ a:hover {
 
   &--center {
     @include full();
-    // margin-bottom: 2em;
     font-size: 1.25rem;
 
     .archive__item-teaser {

assets/_scss/_page.scss

@@ -113,7 +113,6 @@
     margin-bottom: 2em;
     padding: 3em 0;
     @include clearfix;
-    text-align: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
@@ -121,8 +120,12 @@
     animation-delay: 0.25s;
 
     .wrapper {
-      padding-left: 2em;
-      padding-right: 2em;
+      padding-left: 1em;
+      padding-right: 1em;
+
+      @include breakpoint($x-large) {
+        max-width: $x-large;
+      }
     }
 
     .page__title,
@@ -133,6 +136,10 @@
       text-shadow: 1px 1px 4px rgba(#000, 0.5);
     }
 
+    .page__lead {
+      max-width: $medium;
+    }
+
     .page__title {
       font-size: $type-size-2;