From 27f2db6bd370e355791ab85ad470ece2b877396e Mon Sep 17 00:00:00 2001
From: Alvaro <pursuance@gmail.com>
Date: Mon, 11 Nov 2024 16:59:18 +0100
Subject: [PATCH] Fix texts responsive

---
 src/components/energy/section-5/index.tsx | 2 +-
 src/components/home/section-4/index.tsx   | 6 +++---
 src/components/home/section-5/index.tsx   | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/energy/section-5/index.tsx b/src/components/energy/section-5/index.tsx
index d2eb424..3244571 100644
--- a/src/components/energy/section-5/index.tsx
+++ b/src/components/energy/section-5/index.tsx
@@ -15,7 +15,7 @@ export default function Section5() {
       <div className="container px-[20px] xl:px-[150px] flex flex-col xl:flex-row justify-between items-start">
         <div className="flex pb-6 xl:pb-[120px] xl:pr-[40px]">
           <div className="max-w-[540px] xl:min-w-[500px] text-green-700 space-y-5 xl:pb-10">
-            <h2 className="text-3xl xl:text-4xl font-medium pb-10 xl:pb-16">Why storylines for energy futures?</h2>
+            <h2 className="text-3xl xl:text-4xl font-medium pb-6 xl:pb-16">Why storylines for energy futures?</h2>
             <h3 className="text-xl xl:text-2xl pb-5">Storylines in climate science make climate information more relevant and understandable, aiding decision-making, especially when used with digital twin simulations.</h3>
             <KnowMoreButton onClick={() => setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} />
             <AnimatePresence>
diff --git a/src/components/home/section-4/index.tsx b/src/components/home/section-4/index.tsx
index 8f397af..b147b3d 100644
--- a/src/components/home/section-4/index.tsx
+++ b/src/components/home/section-4/index.tsx
@@ -48,7 +48,7 @@ export default function Section4() {
         </video>
         <div className="relative z-10 text-white text-center px-2 xl xl:px-0">
           <div className="text-center xl:text-lg uppercase tracking-tight">Unlocking Future Possibilities</div>
-          <div className="text-center text-[36px] xl:text-4xl max-w-[830px]">
+          <div className="text-center text-[36px] max-xl:leading-[42px] xl:text-4xl max-w-[830px]">
             Harnessing Digital Twins for on-demand simulations.
           </div>
         </div>
@@ -56,9 +56,9 @@ export default function Section4() {
       <Lines verticalClassName="px-[152px] z-0" sectionName="section-4" rows={[1506]} columns={[548]} colorClass="bg-white/10" />
       <div className="container px-[20px] xl:px-[150px]">
         <div className="flex flex-col xl:pb-[120px] gap-[60px] xl:gap-[100px]">
-          <div className="max-w-[630px] space-y-5 pt-20">
+          <div className="max-w-[630px] space-y-5 xl:pt-20">
             <div className="max-w-[594px]">
-              <h3 className="text-2xl pb-5">Through interactive and configurable access to data, models and workflows, the digital twin represents an exciting opportunity to satisfy users’ curiosity.</h3>
+              <h3 className="text-xl xl:text-2xl pb-5">Through interactive and configurable access to data, models and workflows, the digital twin represents an exciting opportunity to satisfy users’ curiosity.</h3>
             </div>
             <KnowMoreButton className="text-white" onClick={() => setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} />
             <AnimatePresence>
diff --git a/src/components/home/section-5/index.tsx b/src/components/home/section-5/index.tsx
index 520da74..c3f332c 100644
--- a/src/components/home/section-5/index.tsx
+++ b/src/components/home/section-5/index.tsx
@@ -12,7 +12,7 @@ export default function Section5() {
       <div className="container px-[20px] xl:px-[150px] flex flex-col xl:flex-row justify-between items-start">
         <div className="flex pb-6 xl:pb-[120px] gap-[69px]">
           <div className="max-w-[630px] xl:min-w-[630px] text-green-700 space-y-5 xl:pb-10">
-            <h2 className="text-3xl xl:text-4xl font-medium pb-10 xl:pb-16">Towards data streaming for efficient uptake by users.</h2>
+            <h2 className="text-3xl xl:text-4xl font-medium pb-6 xl:pb-16">Towards data streaming for efficient uptake by users.</h2>
             <div className="max-w-[487px]">
               <h3 className="text-xl xl:text-2xl pb-5">Current practice is that data generated from lower-resolution climate models is stored to disk.</h3>
               <div>