fix: Home Page Styles Cleanup

DeepDrftPublic.Client/Pages/Home.razor

@@ -30,7 +30,7 @@
                    ImageHeight="auto"
                    ImageWidth="100%"
                    ParallaxSpeed="0.35"
-                   Class="my-8"/>
+                   Class="my-12"/>
 </section>
 
 @* Divider *@
@@ -48,10 +48,12 @@
                 <div class="section-label">Format &amp; Medium</div>
                 <h2 class="section-title">Music through<br /><em>Every</em><br />Medium</h2>
             </MudItem>
-            <MudItem xs="12" md="8">
-                <p class="section-body">
-                    The same hands, three different rooms. A studio cut is built; a live set is risked; a DJ mix is woven. We release in every form the music asks for &mdash; each one a different relationship between the moment and the record of it.
-                </p>
+            <MudItem xs="12" md="8" Class="section-body-item">
+                <div class="section-body">
+                    <p>
+                        The same hands, three different rooms. A studio cut is built; a live set is risked; a DJ mix is woven. We release in every form the music asks for &mdash; each one a different relationship between the moment and the record of it.
+                    </p>
+                </div>
             </MudItem>
         </MudGrid>
     </div>
@@ -171,6 +173,20 @@
     </div>
 </section>
 
+<section>
+    <ParallaxImage Image1="img/mixer-bw.jpg" 
+                   Image2="img/mixer.jpg"
+                   Alt1="Deep DRFT Electronic Music Duo"
+                   NaturalWidth="2048"
+                   NaturalHeight="1365"
+                   WindowHeightFraction="0.45"
+                   ImageHeight="auto"
+                   ImageWidth="100%"
+                   ParallaxSpeed="0.35" />
+</section>
+
+
+
 @code {
     [CascadingParameter] public IStreamingPlayerService? Player { get; set; }
 }

DeepDrftPublic.Client/Pages/Home.razor.css

@@ -93,23 +93,40 @@
     color: var(--deepdrft-green);
 }
 
+/* The body column is already full height; make it a flex container that
+   centers its child vertically, so .section-body (with margin: auto for
+   horizontal centering) sits centered against the taller title column
+   instead of anchored at the top. ::deep is required because the class is
+   on the MudItem-rendered div, which doesn't carry this component's scope
+   attribute. */
+.section-header-grid ::deep .section-body-item {
+    display: flex;
+    align-items: center;
+}
+
 .section-body {
+    display: flex;
+    max-width: 560px;
+    margin: auto;
+    align-content: center;
+    justify-content: center;
+}
+
+.section-body p {
+    display: flex;
     font-family: var(--deepdrft-font-body);
     font-size: 0.9rem;
     line-height: 1.8;
     color: var(--deepdrft-navy);
     opacity: 0.65;
     max-width: 52ch;
-    align-self: end;
 }
 
 /* ── MEDIUM GRID (Music through Every Medium) ── */
 .medium-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1px;
-    background: var(--deepdrft-border);
-    border: 1px solid var(--deepdrft-border);
+    gap: 56px;
     margin-bottom: 4rem;
 }
 
@@ -125,11 +142,14 @@
 
 .medium-card {
     background: var(--deepdrft-white);
+    border: 1px solid var(--deepdrft-border);
     cursor: pointer;
     overflow: hidden;
     text-decoration: none;
     display: block;
     position: relative;
+    max-width: 380px;
+    margin: 0 auto;
 }
 
 .medium-card::after {