diff --git a/src/sidebar/index.html b/src/sidebar/index.html
new file mode 100644
index 0000000..fbac431
--- /dev/null
+++ b/src/sidebar/index.html
@@ -0,0 +1,53 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="./index.scss" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div class="hero" id="hero">
+      <div class="details-wrapper" id="details">
+        <div class="details">
+          <small>Breadcrumb</small>
+          <h1>Title</h1>
+        </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">
+          <ul>
+            <li>1</li>
+            <li>1</li>
+            <li>1</li>
+            <li>1</li>
+            <li>1</li>
+            <li>1</li>
+            <li>1</li>
+          </ul>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/src/sidebar/index.scss b/src/sidebar/index.scss
new file mode 100644
index 0000000..b6c84cf
--- /dev/null
+++ b/src/sidebar/index.scss
@@ -0,0 +1,129 @@
+@use "sass:math";
+
+@import "normalize.css";
+
+$initial-content-width: 80ch;
+$initial-sidebar-width: 300px;
+
+:root {
+  --content-width: #{$initial-content-width};
+  --sidebar-width: #{$initial-sidebar-width};
+}
+
+$tablet-breakpoint: 1235px;
+
+body,
+html {
+  height: 100%;
+  font-size: 18px;
+}
+
+$content-padding: 16px;
+
+$bleed-ratio: 0.2;
+$details-bg: black;
+$details-padding: $content-padding;
+
+$mobile-breakpoint: $initial-content-width * (1 + $bleed-ratio);
+
+.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: var(--content-width);
+    max-width: 100%;
+    margin: 1rem auto;
+
+    h1 {
+      margin: 0;
+      margin-bottom: 0.75rem;
+      margin-top: 0.5rem;
+      font-size: 3.5rem;
+    }
+  }
+}
+
+main {
+  display: flex;
+  gap: 1rem;
+
+  @media (max-width: $tablet-breakpoint) {
+    flex-direction: column-reverse;
+    align-items: center;
+    padding: 1rem;
+  }
+}
+
+.spacer {
+  flex-grow: 1;
+
+  @media (max-width: $tablet-breakpoint) {
+    display: none;
+  }
+}
+
+.content-wrapper {
+  width: calc(var(--content-width) * (1 + $bleed-ratio));
+  max-width: 100%;
+
+  display: grid;
+
+  grid-template-columns: 1fr min(var(--content-width), 100%) 1fr;
+
+  & > * {
+    grid-column: 2;
+    width: 100%;
+
+    transition: width 50ms;
+  }
+
+  & > .bleed {
+    grid-column: 1 / -1;
+    justify-self: center;
+
+    @media (max-width: $mobile-breakpoint) {
+      width: 100vw;
+    }
+  }
+
+  & > .inset {
+    width: percentage(1 - $bleed-ratio);
+    justify-self: center;
+
+    @media (max-width: $mobile-breakpoint) {
+      width: percentage(1 - math.div($bleed-ratio, 2));
+    }
+  }
+}
+
+.sidebar {
+  flex-grow: 1;
+
+  @media (min-width: $tablet-breakpoint) {
+    min-width: var(--sidebar-width);
+  }
+
+  @media (max-width: $tablet-breakpoint) {
+    width: var(--content-width);
+    max-width: 100%;
+  }
+
+  .sidebar-inner {
+    position: sticky;
+    top: 1rem;
+    margin: 1rem;
+    font-size: 16px;
+  }
+}
