diff --git a/src/hero/index.html b/src/hero/index.html
new file mode 100644
index 0000000..4a9a922
--- /dev/null
+++ b/src/hero/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
Breadcrumb
+
Title
+
Details
+
+
+
+
+
diff --git a/src/hero/index.scss b/src/hero/index.scss
new file mode 100644
index 0000000..0e23b9b
--- /dev/null
+++ b/src/hero/index.scss
@@ -0,0 +1,78 @@
+@import "normalize.css";
+
+body,
+html {
+ height: 100%;
+ font-size: 18px;
+}
+
+$content-width: 85ch;
+$content-padding: 16px;
+$bleed-ratio: 0.2;
+$details-padding: 1rem;
+
+.hero {
+ height: 45vh;
+ background-color: red;
+ display: flex;
+ align-items: flex-end;
+
+ .details {
+ padding: $details-padding;
+ background-color: rgba(0, 0, 0, 0.4);
+ color: white;
+ line-height: 1;
+ width: calc(#{$content-width} - 2 * $details-padding);
+ margin: 0 auto;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ h1 {
+ margin: 0;
+ margin-bottom: 0.75rem;
+ margin-top: 0.5rem;
+ font-size: 3.5rem;
+ }
+
+ p {
+ margin: 0;
+ }
+ }
+}
+
+.content-wrapper {
+ display: grid;
+ width: 100%;
+ max-width: 100vw;
+ grid-template-columns: 1fr min($content-width, calc(100% - #{$content-padding} * 2)) 1fr;
+
+ & > * {
+ grid-column: 2;
+ width: 100%;
+ }
+
+ .full-bleed {
+ grid-column: 1 / -1;
+ max-width: 100vw;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .bleed {
+ @extend .full-bleed;
+ max-width: calc($content-width * (1 + $bleed-ratio));
+ }
+
+ .inset {
+ max-width: calc($content-width * (1 - $bleed-ratio));
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .half-bleed {
+ @extend .full-bleed;
+ max-width: calc(#{$content-width} + (100vw - #{$content-width}) * 0.5);
+ }
+}