improve death stlying

src/pages/death.astro

@@ -1,24 +1,20 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-
 const title = "my father";
 ---
 
 <BaseLayout title={title} useHeader={false}>
   <div class="death-container">
     <img id="death-image" src="/death/death.webp" alt="Philip Matthew Ruth" />
-
     <div id="tribute-text" class="tribute">
       rip philip matthew ruth<br />
       february 8, 1967 – c. december 2, 2025
     </div>
-
     <div class="credit">
       gary wray<br />
       <em>waiting in line</em>, 2021
     </div>
   </div>
-
   <style>
     html,
     body {
@@ -28,37 +24,45 @@ const title = "my father";
       width: 100%;
       overflow: hidden;
       background: black;
+      color: white !important;
     }
-
     .death-container {
       position: relative;
       width: 100vw;
       height: 100vh;
+      display: grid;
+      grid-template-rows: 1fr auto;
+      grid-template-columns: 1fr 1fr;
     }
-
     img {
+      grid-row: 1 / -1;
+      grid-column: 1 / -1;
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
     }
-
     .tribute {
-      position: fixed;
-      bottom: 1.5rem;
-      right: 1.5rem;
-      font-size: 3em;
+      grid-row: 2;
+      grid-column: 2;
+      justify-self: end;
+      align-self: end;
+      padding: 1.5rem;
+      font-size: clamp(1.5rem, 4vmin, 3em);
       z-index: 10;
       text-align: right;
+      color: white;
     }
-
     .credit {
-      position: fixed;
-      bottom: 1.5rem;
-      left: 1.5rem;
+      grid-row: 2;
+      grid-column: 1;
+      justify-self: start;
+      align-self: end;
+      padding: 1.5rem;
       z-index: 10;
-      font-size: 2em;
+      font-size: clamp(1.2rem, 3vmin, 2em);
       text-align: left;
+      color: white;
     }
   </style>
 </BaseLayout>