From 41afba6daf561164ebbac66c0162d6927212e915 Mon Sep 17 00:00:00 2001
From: roryjshelton <76418221+roryjshelton@users.noreply.github.com>
Date: Fri, 5 May 2023 08:45:14 +0200
Subject: [PATCH] -> tailwind

---
 src/components/P1/Grid/GridStyles.css       |  7 ++-----
 src/components/P1/Message/Message.astro     | 10 ++++++++--
 src/components/P1/Message/MessageStyles.css | 10 ----------
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/P1/Grid/GridStyles.css b/src/components/P1/Grid/GridStyles.css
index 8ae5dcb..66b8c60 100644
--- a/src/components/P1/Grid/GridStyles.css
+++ b/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 {
diff --git a/src/components/P1/Message/Message.astro b/src/components/P1/Message/Message.astro
index 1e09413..88597a0 100644
--- a/src/components/P1/Message/Message.astro
+++ b/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.
diff --git a/src/components/P1/Message/MessageStyles.css b/src/components/P1/Message/MessageStyles.css
index 707c517..98a59c7 100644
--- a/src/components/P1/Message/MessageStyles.css
+++ b/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;
 }
\ No newline at end of file