refactor(components): change the css for the home page banner

components/HomePageHero.vue

@@ -29,7 +29,7 @@
 
 <script>
 export default {
-  name: 'Hero',
+  name: 'HomeHeroBanner',
 }
 </script>
 
@@ -43,7 +43,7 @@ export default {
 }
 
 .banner {
-  @apply flex flex-col mx-9 h-auto md:flex-row;
+  @apply flex flex-col px-8 md:px-14 lg:px-24 h-auto md:flex-row;
 }
 
 .content-container {
@@ -52,15 +52,15 @@ export default {
 
 .content-header {
   font-family: 'IBM Mono';
-  @apply text-4xl md:text-4xl  lg:text-5xl tracking-wide font-normal md:mx-3 lg:mx-16;
+  @apply text-4xl md:text-4xl  lg:text-5xl tracking-wide font-normal;
 }
 
 .para-section {
   font-family: 'IBM Sans';
-  @apply w-11/12 pt-7 text-xl lg:text-2xl font-normal md:mx-3 lg:mx-16 lg:w-9/12;
+  @apply w-11/12 pt-7 text-xl lg:text-2xl font-normal lg:w-9/12;
 }
 
 .section-image {
-  @apply my-8 place-self-end w-8/12 md:w-5/12 lg:w-80 lg:mt-14 2xl:w-96 lg:mr-12;
+  @apply my-8 place-self-end w-8/12 md:w-5/12 lg:w-80  2xl:w-96;
 }
 </style>