From 6e771a5d12f0c2e396a3bad178af8db887cce34b Mon Sep 17 00:00:00 2001
From: Angela Hu <angelahu925@gmail.com>
Date: Tue, 27 Aug 2024 01:04:04 -0700
Subject: [PATCH] Adjusting mobile view

---
 src/components/type-animation/index.tsx        |  2 +-
 src/components/type-animation/style.module.css |  2 +-
 src/sections/Hero/style.module.css             | 15 ++++-----------
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/type-animation/index.tsx b/src/components/type-animation/index.tsx
index 5a48d4a..8f5d8d4 100644
--- a/src/components/type-animation/index.tsx
+++ b/src/components/type-animation/index.tsx
@@ -18,7 +18,7 @@ const TypeAnimation: React.FC = () => {
   }, []);
 
   return (
-    <div className={styles.landing_title}>
+    <div className={styles.word_container}>
       {currentWord === 'build' && <Typewriter text={currentWord} />}
       {currentWord === 'break' && <span className={styles.break}>{currentWord}</span>}
       {currentWord === 'innovate' && <span className={styles.innovate}>{currentWord}</span>}
diff --git a/src/components/type-animation/style.module.css b/src/components/type-animation/style.module.css
index 4121209..756d857 100644
--- a/src/components/type-animation/style.module.css
+++ b/src/components/type-animation/style.module.css
@@ -1,4 +1,4 @@
-.landing_title {
+.word_container {
   background-color: var(--docs-dark-bg);
   width: 60%;
   padding: 0.5rem;
diff --git a/src/sections/Hero/style.module.css b/src/sections/Hero/style.module.css
index 4df25e5..bd2a8a5 100644
--- a/src/sections/Hero/style.module.css
+++ b/src/sections/Hero/style.module.css
@@ -21,7 +21,7 @@
 
 /* Landing Card Icons */
 
-.backdrop_left, .backdrop_right {
+.backdrop_left {
     object-fit: contain;
     width: 100%;
     height: 100%;
@@ -74,22 +74,15 @@
         font-size: 10px;
     }
     .backdrop {
-        grid-template-columns: 1fr; 
-        grid-template-rows: auto; 
+        grid-template-columns: minmax(18em, 1fr);
+        grid-template-rows: minmax(0, 0.7fr);
         max-width: 95%;
     }
-    
     .backdrop_left {
         justify-self: center;
     }
-    .landing_title{
-        margin-bottom: 1rem;
-    }
     .landing_text{
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        margin-right: 2rem;
-        margin-left: 2rem;
+        align-self: start;
     }
 }