fix: Home Page Styles Cleanup

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 {