-> tailwind

src/components/P1/Grid/GridStyles.css

@@ -1,7 +1,7 @@
 .grid-grid {
     display: grid;
-    grid-template-columns: 25% 25% 25%;
-    grid-template-rows: 5% 5%;
+    grid:
+        "top-left top-mid top-right" 5% "bot-left bot-mid bot-right" 5% / 25% 25% 25%;
     gap: 44.5% 0.5%;
     margin-block: 15vh;
     grid-auto-flow: row;
@@ -9,9 +9,6 @@
     align-content: center;
     justify-items: center;
     align-items: center;
-    grid-template-areas:
-        "top-left top-mid top-right"
-        "bot-left bot-mid bot-right";
 }
 
 .top-left {

src/components/P1/Message/Message.astro

@@ -3,8 +3,14 @@ import "./MessageStyles.css";
 ---
 
 <div class="message-container">
-    <div class="message-header">A message from Derrick</div>
-    <div class="message-content">
+    <div
+        class="message-header text-[color:var(--blue-charcoal-2)] text-[calc(25px_+_(32_-_24)_*_((100vw_-_300px)_/_(1600_-_300)))] font-bold leading-[2em] not-italic;"
+    >
+        A message from Derrick
+    </div>
+    <div
+        class="message-content text-[color:var(--blue-charcoal-2)] text-[calc(15px_+_(21_-_14)_*_((100vw_-_300px)_/_(1600_-_300)))] max-w-[85%] font-normal not-italic;"
+    >
         Web3 gives people control over their data, privacy, and ownership.
         Lume's affordable Web3 tech aims to speed up the transition from Web2 to
         Web3, which matters for privacy and security.

src/components/P1/Message/MessageStyles.css

@@ -11,19 +11,9 @@
 }
 
 .message-header {
-    color: var(--blue-charcoal-2);
     font-family: var(--font-family-jetbrains-mono);
-    font-size: calc(25px + (32 - 24) * ((100vw - 300px) / (1600 - 300)));
-    font-weight: 700;
-    line-height: 2em;
-    font-style: normal;
 }
 
 .message-content {
-    color: var(--blue-charcoal-2);
     font-family: var(--font-family-jaldi);
-    font-size: calc(15px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
-    max-width: 85%;
-    font-weight: 400;
-    font-style: normal;
 }