Update kit of parts page

components/kit-of-parts.js

@@ -4,10 +4,14 @@ import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from './jambonz-u
 
 export default function KitOfParts({pageData}) {
   return (
-    <>
+    <div className="kop">
       {/* High-level design information */}
-      <div className="wrap">
-        <div className="pad">
+      <div className="hero">
+        <div className="wrap">
+          <H1>
+            <div>Kit of Parts</div>
+            <div>&nbsp;</div>
+          </H1>
           <H5>
             <div><strong>font</strong></div>
             <div>Objectivity (free, large family—16 styles)</div>
@@ -149,6 +153,6 @@ export default function KitOfParts({pageData}) {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 }

styles/_kit-of-parts.scss

@@ -1,42 +1,54 @@
-.wrap-text {
-  .h1 {
-    max-width: 1024px;
+.kop {
+  text-align: center;
+
+  .wrap-text {
+    .h1 {
+      max-width: 1024px;
+    }
+
+    .h2 {
+      max-width: 950px;
+    }
+
+    .h3 {
+      max-width: 860px;
+    }
+
+    .h4 {
+      max-width: 875px;
+    }
+
+    .h5 {
+      max-width: 768px;
+    }
+
+    .h6 {
+      max-width: 640px;
+    }
+
+    .p {
+      max-width: 640px;
+    }
+
+    .m, .ms {
+      max-width: 500px;
+    }
+
+    .mxs {
+      max-width: 380px;
+    }
+
+    > div {
+      margin: 0 auto;
+    }
   }
 
-  .h2 {
-    max-width: 950px;
-  }
+  .pad {
+    padding-top: 64px;
+    padding-bottom: 64px;
 
-  .h3 {
-    max-width: 860px;
+    img {
+      display: inline-block;
+    }
   }
-
-  .h4 {
-    max-width: 875px;
-  }
-
-  .h5 {
-    max-width: 768px;
-  }
-
-  .h6 {
-    max-width: 640px;
-  }
-
-  .p {
-    max-width: 640px;
-  }
-
-  .m, .ms {
-    max-width: 500px;
-  }
-
-  .mxs {
-    max-width: 380px;
-  }
-}
-
-.pad {
-  padding-top: 64px;
-  padding-bottom: 64px;
 }

styles/_typography.scss

@@ -54,7 +54,7 @@ a:not(.btn) {
 }
 
 strong {
-  font-family: 'objectivitymedium';
+  font-family: 'objectivitybold';
 }
 
 em {