Update: Maintain Slug Hierarchy

Add Description of the project beneath the `Slogan` component
maintaining visual hierarchy and align the description text to the left
of the page for mobile view

src/components/Hero/index.jsx

@@ -38,14 +38,14 @@ const Hero = () => {
         <div className={`container ${styles.container}`}>
           <div className={styles.heroContent}>
             <h1 className={`hero__title ${styles.heroTitle}`}>LunarVim</h1>
+            <Slogan />
             <p className={`hero__description ${styles.heroDescription} `}>
               An IDE layer for{' '}
               <a href='https://neovim.io' target={'_blank'}>
                 Neovim
               </a>{' '}
               with sane defaults. Completely free and community driven.
             </p>
-            <Slogan />
             <div className={styles.buttons}>
               <Link
                 className={`button button--primary button--lg ${

src/components/Hero/index.module.css

@@ -16,7 +16,7 @@
 }
 
 .heroDescription {
-  text-align: center;
+  text-align: left;
 }
 
 .heroBanner > .container {
@@ -141,7 +141,4 @@
   .heroContent {
     max-width: unset;
   }
-  .heroDescription {
-    text-align: left;
-  }
 }