fix: 💄 Update discord section

src/components/Discord.css

@@ -1,17 +1,27 @@
 #call_to_action {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 5rem 0 4rem;
-  padding: 3.5em;
+  padding: 2rem;
   border: 2px solid var(--black);
   border-left: none;
   border-right: none;
   background-color: var(--purple);
 }
 
-.discord-text {
+/* .discord-text {
   font-weight: 600;
-  font-size: 3rem;
+  font-size: 1.5rem;
   line-height: 125%;
+} */
+
+.text-2xl {
+  font-size: 1.5rem; /* 24px */
+  line-height: 2rem; /* 32px */
+}
+
+.cta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  max-width: 500px;
+  margin: 0 auto;
 }

src/components/Discord.tsx

@@ -1,19 +1,18 @@
-
-import discord from '../images/discord_round.svg';
-import './Discord.css'
+import discord from "../images/discord_round.svg";
+import "./Discord.css";
 
 // Discord call to action
 function Discord() {
   return (
     <div id="call_to_action">
-      <div className="discord-text">
-        Join our conversation on Discord!
+      <div className="cta">
+        <div className="discord-text text-2xl lg:text-3xl font-semibold">Join our conversation on Discord!</div>
+        <a href="https://discord.gg/g5YTV7HHbh" target="_blank" rel="noopener noreferrer" aria-label="PSE Discord link">
+          <img style={{ width: "4rem" }} src={discord} alt="" />
+        </a>
       </div>
-      <a href="https://discord.gg/g5YTV7HHbh" target="_blank" rel="noopener noreferrer" aria-label="PSE Discord link" >
-        <img style={{ width: '4rem' }} src={discord} alt="" />
-      </a>
     </div>
-  )
+  );
 }
 
 export default Discord;