fixes

src/components/Layout.module.scss

@@ -7,7 +7,7 @@
         display: grid;
         grid-template-columns:
             [full-start] minmax($spacer, 1fr)
-            [main-start] minmax(0, $screen-sm) [main-end]
+            [main-start] minmax(0, 38rem) [main-end]
             minmax($spacer, 1fr) [full-end];
 
         > * {

src/components/organisms/Header.module.scss

@@ -24,10 +24,6 @@
     padding-top: $spacer * 2;
     padding-bottom: 0;
 
-    @media (min-width: 30rem) {
-        padding-bottom: $spacer / 2;
-    }
-
     .header__link {
         pointer-events: all;
         width: auto;

src/pages/404.jsx

@@ -21,16 +21,14 @@ export default class NotFound extends Component {
     this.getRandomGif()
   }
 
-  getRandomGif() {
-    giphyClient
-      .random('gifs', { tag })
-      .then(response => {
-        const gif = response.data.images.original.mp4
-        this.setState({ gif })
-      })
-      .catch(err => {
-        return err
-      })
+  async getRandomGif() {
+    try {
+      let response = await giphyClient.random('gifs', { tag })
+      const gif = response.data.images.original.mp4
+      this.setState({ gif })
+    } catch (error) {
+      return error
+    }
   }
 
   handleClick = e => {
@@ -44,16 +42,16 @@ export default class NotFound extends Component {
         <h1>Shenanigans, page not found.</h1>
         <p>
           You might want to check the url, or{' '}
-          <Link to={'/'}>go back to the homepage</Link>. Or just check out some
-          cat fail gifs, entirely your choice.
+          <Link to={'/'}>go back to the homepage</Link>. Or just check out some{' '}
+          {tag} gifs, entirely your choice.
         </p>
 
         <video className="gif" src={this.state.gif} autoPlay loop />
 
         <div>
-          <Button onClick={this.handleClick}>
-            Show me another cat fail gif
-          </Button>
+          <Button
+            onClick={this.handleClick}
+          >{`Get another '${tag}' gif`}</Button>
         </div>
       </article>
     )

src/pages/404.module.scss

@@ -1,19 +1,18 @@
 @import 'variables';
 
-.content--404 {
+.content {
     text-align: center;
     height: 100%;
     max-width: 35rem;
     margin-left: auto;
     margin-right: auto;
 
-    .gif {
-        display: inline-block;
+    video {
+        display: block;
         width: auto;
         height: 300px;
         box-shadow: 0 3px 5px rgba($brand-main, .15),
             0 5px 16px rgba($brand-main, .15);
-        margin-top: $spacer / 4;
-        margin-bottom: $spacer / 2;
+        margin: $spacer / 4 auto $spacer / 2 auto;
     }
 }

src/pages/index.module.scss

@@ -3,11 +3,10 @@
 .projects {
     display: grid;
     grid-template-columns: 1fr;
-    grid-gap: $spacer * 6;
+    grid-gap: $spacer * 3;
 
     @media (min-width: $screen-md) {
         grid-template-columns: 1fr 1fr;
-        grid-gap: $spacer * 3;
         max-width: calc(#{$projectImageMaxWidth} + #{$spacer * 2});
         margin: 0 auto;
         padding: $spacer $spacer * 3;

src/templates/Project.module.scss

@@ -19,14 +19,15 @@
 
 .project__description {
     font-size: $font-size-base;
-    margin-bottom: $spacer * 3;
+    margin-bottom: $spacer * 2;
 }
 
 .project__meta {
+    margin-top: -($spacer);
     margin-bottom: $spacer * 5;
     display: grid;
     grid-template-columns: 1fr;
-    grid-gap: $spacer;
+    grid-gap: $spacer * 2;
 
     @media (min-width: $screen-sm) {
         grid-template-columns: 1fr 1fr;