diff --git a/src/sidebar/index.html b/src/sidebar/index.html
new file mode 100644
index 0000000..6b7708e
--- /dev/null
+++ b/src/sidebar/index.html
@@ -0,0 +1,45 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="./index.scss" />
+  </head>
+  <body>
+    <div class="hero" id="hero">
+      <div class="details-wrapper" id="details">
+        <div class="details">
+          <small>Breadcrumb</small>
+          <h1>Title</h1>
+          <p>Details</p>
+        </div>
+      </div>
+    </div>
+    <main>
+      <div class="spacer"></div>
+      <div class="content-wrapper">
+        <p>Content</p>
+        <img src="https://placehold.co/2000x200" />
+        <img src="https://placehold.co/2000x200" class="inset" />
+        <img src="https://placehold.co/2000x200" class="bleed" />
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+        <p>Content</p>
+      </div>
+      <div class="sidebar">
+        <div class="sidebar-inner">
+          <p>Sidebar</p>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/src/sidebar/index.scss b/src/sidebar/index.scss
new file mode 100644
index 0000000..619bdd2
--- /dev/null
+++ b/src/sidebar/index.scss
@@ -0,0 +1,113 @@
+@import "normalize.css";
+
+body,
+html {
+  height: 100%;
+  font-size: 18px;
+}
+
+$content-width: 85ch;
+$content-padding: 16px;
+
+$bleed-ratio: 0.2;
+$details-bg: black;
+$details-padding: $content-padding;
+
+.hero {
+  height: 50vh;
+  background-color: red;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  .details-wrapper {
+    background-color: transparentize($details-bg, 0.6);
+    color: white;
+    line-height: 1;
+    width: calc(100% - ($details-padding * 2));
+    padding: 0 $details-padding;
+  }
+
+  .details {
+    width: $content-width;
+    max-width: 100%;
+    margin: 1rem auto;
+
+    h1 {
+      margin: 0;
+      margin-bottom: 0.75rem;
+      margin-top: 0.5rem;
+      font-size: 3.5rem;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+}
+
+main {
+  display: flex;
+}
+
+.spacer {
+  flex-grow: 1;
+  flex-shrink: 10;
+  flex-basis: 200px;
+}
+
+.content-wrapper {
+  display: grid;
+  width: $content-width * (1 + $bleed-ratio);
+  max-width: 100vw;
+  grid-template-columns:
+    1fr
+    min($content-width, 100vw)
+    1fr;
+
+  & > * {
+    grid-column: 2;
+    width: 100%;
+  }
+
+  .bleed {
+    grid-column: 1 / -1;
+    max-width: 100vw;
+    justify-self: center;
+  }
+
+  .inset {
+    max-width: calc($content-width * (1 - $bleed-ratio));
+    justify-self: center;
+  }
+}
+
+.sidebar {
+  flex-grow: 1;
+  flex-shrink: 10;
+  flex-basis: 200px;
+
+  .sidebar-inner {
+    position: sticky;
+    top: 0;
+  }
+}
+
+@media (max-width: 1200px) {
+  main {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+
+  .spacer {
+    display: none;
+  }
+
+  .sidebar {
+    flex-basis: unset;
+
+    .sidebar-inner {
+      position: unset;
+    }
+  }
+}
