landing hero container

website/.vitepress/theme/Landing.vue

@@ -408,6 +408,7 @@ onBeforeUnmount(() => {
   <section class="hero" id="hero">
     <span class="corner-ticks" aria-hidden="true"><span></span></span>
 
+    <div class="hero-inner">
       <div class="hero-copy">
         <h1 class="display">
           <span class="line">Memory is</span>
@@ -482,6 +483,7 @@ onBeforeUnmount(() => {
           disablepictureinpicture
         ></video>
       </div>
+    </div>
   </section>
 
   <!-- THE FORGETTING -->
@@ -1039,15 +1041,24 @@ body.mempalace-active { overflow-x: hidden; }
 
 /* Hero */
 .mempalace-landing .hero {
+  position: relative;
+  width: 100%;
   min-height: calc(100vh - 54px);
   max-height: 900px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: clamp(2rem, 4vw, 3.5rem);
+  padding-bottom: clamp(2rem, 4vw, 3.5rem);
+  overflow: hidden;
+}
+.mempalace-landing .hero-inner {
+  width: 100%;
+  max-width: 1240px;
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
   gap: clamp(2rem, 4vw, 4rem);
   align-items: center;
-  padding-top: clamp(2rem, 4vw, 3.5rem);
-  padding-bottom: clamp(2rem, 4vw, 3.5rem);
-  overflow: hidden;
 }
 .mempalace-landing .hero-copy { position: relative; z-index: 3; }
 .mempalace-landing .hero h1 {
@@ -1957,7 +1968,7 @@ body.mempalace-active { overflow-x: hidden; }
   .mempalace-landing .mech:nth-child(2) { border-bottom: var(--rule) solid var(--hair); }
 }
 @media (max-width: 900px) {
-  .mempalace-landing .hero { grid-template-columns: 1fr; gap: 2rem; }
+  .mempalace-landing .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
   .mempalace-landing .palace-stage { justify-self: center; max-width: 400px; order: -1; aspect-ratio: 1 / 0.85; }
   .mempalace-landing .anatomy-head { grid-template-columns: 1fr; }
   .mempalace-landing .anatomy-diagram { grid-template-columns: 1fr; }