From 960e5e250edc5a8019eb40534e2f0b9fc7f5b9b5 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 12 Mar 2024 12:59:43 +0700
Subject: [PATCH] landing responsive font size change

---
 .../LandingVideoReel/LandingVideoReel.scss    | 30 +++++++++++++++++++
 .../LandingVideoReel/LandingVideoReel.tsx     |  4 +--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss
index efe02c1810..99a80f80aa 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss
@@ -31,4 +31,34 @@
       z-index: 1;
     }
   }
+
+  .storyteller-landing-heading {
+    font-size: 52px;
+  }
+
+  .storyteller-landing-sub-text {
+    max-width: 900px;
+    font-size: 18px;
+  }
+
+  @media screen and (max-width: 992px) {
+    .storyteller-landing-heading {
+      font-size: 44px;
+    }
+
+    .storyteller-landing-sub-text {
+      max-width: 100%;
+      font-size: 16px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .storyteller-landing-heading {
+      font-size: 32px;
+    }
+
+    .storyteller-landing-sub-text {
+      font-size: 16px;
+    }
+  }
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx
index e303515467..be1e1ada7e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx
@@ -51,10 +51,10 @@ export default function LandingVideoReel(props: LandingVideoReelProps) {
       <div className="reel-overlay">
         <div className="container h-100">
           <div className="text-center text-white d-flex flex-column justify-content-center align-items-center zi-2 h-100">
-            <h1 className="display-3 fw-bold">
+            <h1 className="storyteller-landing-heading fw-bold">
               Enabling Anyone to Make Professional Film, Animation, and Music
             </h1>
-            <h5 className="fw-normal mb-2 mt-2 w-75 lh-base opacity-75">
+            <h5 className="fw-normal mb-2 mt-2 lh-base opacity-75 storyteller-landing-sub-text">
               StorytellerAI's powerful new engine combines Generative AI and
               User Generated Content to radically democratize both audio and
               video production.