diff --git a/_data/metadata.js b/_data/metadata.js
index 8ccc1e9..264647a 100644
--- a/_data/metadata.js
+++ b/_data/metadata.js
@@ -1,5 +1,5 @@
 export default {
-	title: "",
+	title: "District Dharma Collective",
 	description: "",
 	url: "",
 	author: "Lee Cattarin",
diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
index 44515f9..0cb667f 100644
--- a/_includes/layouts/page.njk
+++ b/_includes/layouts/page.njk
@@ -2,6 +2,12 @@
 layout: base.njk
 ---
 
-<h1>{{ title }}</h1>
+{% if hero %}
+  <img id="hero" src="{{ hero.src }}" alt="{{ hero.alt }}">
+{% endif %}
 
-{{ content | safe }}
+<div id="content">
+  <h1>{{ title }}</h1>
+
+  {{ content | safe }}
+</div>
diff --git a/css/main.css b/css/main.css
index b41005f..00a330b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -3,58 +3,79 @@
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
-/* 1. Use a more-intuitive box-sizing model */
 *, *::before, *::after {
-  box-sizing: border-box;
+  box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
+}
+
+#root, #__next {
+  isolation: isolate; /* 10. Create a root stacking context */
 }
 
-/* 2. Remove default margin */
 *:not(dialog) {
-  margin: 0;
+  margin: 0; /* 2. Remove default margins */
 }
 
-/* 3. Enable keyword animations */
 @media (prefers-reduced-motion: no-preference) {
   html {
-    interpolate-size: allow-keywords;
+    interpolate-size: allow-keywords; /* 3. Enable keyword animations */
   }
 }
 
 body {
-  /* 4. Increase line-height */
-  line-height: 1.5;
-  /* 5. Improve text rendering */
-  -webkit-font-smoothing: antialiased;
+  line-height: 1.5; /* 4. Increase line-height */
+  -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
+  font-family: sans-serif;
+}
+
+#content {
+	width: 65%;
+	max-width: 1800px;
+	margin-inline: auto;
+	margin-block-end: 3rem;
+}
+
+@media (max-width: 1050px) {
+	#content {
+		width: 85%;
+	}
+}
+
+@media (max-width: 650px) {
+	#content {
+		width: 92%;
+	}
 }
 
-/* 6. Improve media defaults */
 img, picture, video, canvas, svg {
-  display: block;
-  max-width: 100%;
-  height: auto;
+  display: block; /* 6. Improve media defaults */
+  max-width: 100%; /* 6. Improve media defaults */
+  height: auto; /* 6. Improve media defaults */
+  margin: 0 auto;
 }
 
-/* 7. Inherit fonts for form controls */
 input, button, textarea, select {
-  font: inherit;
+  font: inherit; /* 7. Inherit fonts for form controls */
 }
 
-/* 8. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
+h1, h2, h3, h4, h5, h6, p {
+  overflow-wrap: break-word; /* 8. Avoid text overflows */
 }
 
-/* 9. Improve line wrapping */
-p {
-  text-wrap: pretty;
-}
 h1, h2, h3, h4, h5, h6 {
-  text-wrap: balance;
+  text-wrap: balance; /* 9. Improve line wrapping */
+  font-family: serif;
+  margin-block-start: 1em;
 }
 
-/*
-  10. Create a root stacking context
-*/
-#root, #__next {
-  isolation: isolate;
+h1 {
+	text-align: center;
+}
+
+p {
+  text-wrap: pretty; /* 9. Improve line wrapping */
+}
+
+#hero {
+	aspect-ratio: 40 / 9;
+	object-fit: cover;
 }
diff --git a/package-lock.json b/package-lock.json
index 43a8ce7..1342a93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-	"name": "11ty",
+	"name": "district-dharma",
 	"version": "1.0.0",
 	"lockfileVersion": 3,
 	"requires": true,
diff --git a/package.json b/package.json
index 36ffc7c..b6ecd11 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "",
+	"name": "district-dharma",
 	"version": "1.0.0",
 	"description": "",
 	"scripts": {