update

assets/import/include.scss

@@ -11,3 +11,62 @@
     }
   }
 }
+
+@mixin posts {
+  .section.posts {
+    .inner {
+      display: grid;
+      grid-gap: 1rem;
+      grid-template-columns: repeat(2, 1fr);
+      margin: 40px 0;
+      a {
+        color: $white-light;
+        text-decoration: none;
+      }
+      article {
+        background: $bg60;
+        border-radius: 5px;
+        color: $white;
+        display: flex;
+        flex-flow: column;
+        height: 100%;
+        padding: 20px 40px;
+        transition: background .2s;
+        &:hover {
+          background: $bg50;
+        }
+        h1 {
+          color: $white;
+          display: flex;
+          font-size: 18px;
+          font-weight: 400;
+          margin: 0 0 10px 0;
+          min-height: 65px;
+          text-align: center;
+          span {
+            margin: auto;
+          }
+        }
+        p.description {
+          color: $white-dark;
+          flex: 1;
+          font-size: 16px;
+          margin: 20px 0;
+        }
+        p.meta {
+          color: $white-dark;
+          font-size: 14px;
+          margin: 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+  @media (max-width: 900px) {
+    main {
+      .section.articles.inner {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  }
+}

assets/import/main.scss

@@ -54,4 +54,5 @@ hr {
 
 main {
   width: 100vw;
+  margin: 60px 0 0 0;
 }