Added placeholder image, finalized <main> layout

public/css/home.css

@@ -85,12 +85,20 @@
   border-radius: 75%;
 }
 
+main {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100% - var(--navbar-height) - var(--footer-height));
+}
 main > * {
   padding: 3rem;
 }
 main > :nth-child(2n) {
   background-color: rgba(var(--brown), 0.21);
 }
+main > :last-child {
+  flex: 1 0 auto;
+}
 
 .home-text {
   display: grid;
@@ -105,13 +113,19 @@ main > :nth-child(2n) {
   font-weight: 600;
 }
 
-.featured {
+.featured,
+.about {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
 }
-.featured > h1 {
+.featured img {
+  object-fit: cover;
+  object-position: center;
+  width: 100%;
+}
+.featured > h1,
+.about > h1 {
   font-size: 3.25rem;
   font-weight: 400;
   color: rgba(var(--black), 0.86);
@@ -120,17 +134,27 @@ main > :nth-child(2n) {
   display: flex;
   flex-direction: column;
   margin-top: 2rem;
+  width: 100%;
 }
 .featured p, .featured a {
   margin-top: 1rem;
   display: inline-block;
 }
 .featured > div > * {
-  text-align: end;
+  text-align: center;
 }
 .featured h2 {
   font-size: 2.25rem;
   font-weight: 300;
+  margin-top: 1rem;
+}
+
+.about > div {
+  margin-top: 2rem;
+}
+
+.about * {
+  text-align: center;
 }
 
 /* Grid Pattern */
@@ -194,10 +218,8 @@ main > :nth-child(2n) {
   .featured > div {
     flex-direction: row;
   }
-  .featured > div > :first-child {
-    flex: 1;
-  }
-  .featured > div > :last-child {
-    flex: 2;
+  .featured > div > * {
+    text-align: end;
+    padding-left: 2rem;
   }
 }

public/css/style.css

@@ -16,6 +16,7 @@
 
 * {
   font-family: "Lato", sans-serif;
+  box-sizing: border-box;
 }
 
 html, body {
@@ -32,9 +33,6 @@ html, body, p, h1, h2, h3, h4, h5, h6 {
 body {
   background-color: var(--background-color);
 }
-body > * {
-  box-sizing: border-box;
-}
 
 header {
   background-color: var(--header-color);