diff --git a/src/hero/index.html b/src/hero/index.html
index 4a9a922..530d7eb 100644
--- a/src/hero/index.html
+++ b/src/hero/index.html
@@ -3,11 +3,13 @@
     <link rel="stylesheet" href="./index.scss" />
   </head>
   <body>
-    <div class="hero">
-      <div class="details">
-        <small>Breadcrumb</small>
-        <h1>Title</h1>
-        <p>Details</p>
+    <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>
     <div class="content-wrapper">
@@ -17,6 +19,21 @@
       <img src="https://placehold.co/2000x200" class="inset" />
       <img src="https://placehold.co/2000x200" class="half-bleed" />
       <img src="https://placehold.co/2000x200" class="full-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>
   </body>
 </html>
diff --git a/src/hero/index.scss b/src/hero/index.scss
index 0e23b9b..7baacf2 100644
--- a/src/hero/index.scss
+++ b/src/hero/index.scss
@@ -9,25 +9,24 @@ html {
 $content-width: 85ch;
 $content-padding: 16px;
 $bleed-ratio: 0.2;
-$details-padding: 1rem;
 
 .hero {
-  height: 45vh;
+  height: 50vh;
   background-color: red;
   display: flex;
   align-items: flex-end;
 
-  .details {
-    padding: $details-padding;
+  .details-wrapper {
+    padding: 1rem;
     background-color: rgba(0, 0, 0, 0.4);
     color: white;
     line-height: 1;
-    width: calc(#{$content-width} - 2 * $details-padding);
-    margin: 0 auto;
+    width: 100%;
+  }
 
-    &:hover {
-      opacity: 1;
-    }
+  .details {
+    width: $content-width;
+    margin: 0 auto;
 
     h1 {
       margin: 0;
