[Style] Add padding for layout container main component

.gitignore

@@ -1,3 +1,5 @@
+node_modules\
+
 # Logs
 logs
 *.log

src/components/Layout/Layout.styles.ts

@@ -7,4 +7,34 @@ export const LayoutContainer = styled.div`
 
 export const LayoutContainerMain = styled.div`
   min-height: calc(100vh - 256px);
+
+  padding: 60px 40px;
+
+  h1 {
+    font-size: 48px;
+    max-width: 900px;
+    margin: 0 auto;
+    margin-bottom: 18px;
+  }
+
+  @media (min-width: 768px) {
+    padding: 60px 40px;
+    h1 {
+      font-size: 60px;
+    }
+  }
+
+  @media (min-width: 992px) {
+    h1 {
+      font-size: 64px;
+    }
+    padding: 60px 20px;
+  }
+
+  @media (min-width: 1280px) {
+    h1 {
+      font-size: 72px;
+    }
+    padding: 80px 0;
+  }
 `

src/components/Section/HeroSection.tsx

@@ -1,13 +1,4 @@
 import { Section } from "./Section"
 import styled from "styled-components"
 
-export const HeroSection = styled(Section)`
-  padding: 80px 0;
-
-  h1 {
-    font-size: 72px;
-    max-width: 900px;
-    margin: 0 auto;
-    margin-bottom: 18px;
-  }
-`
+export const HeroSection = styled(Section)``

src/styles/global.css

@@ -0,0 +1,22 @@
+.HeroSection{
+    padding: 80px 0;
+}
+
+h1 {
+  font-size: 72px;
+  max-width: 900px;
+  margin: 0 auto;
+  margin-bottom: 18px;
+}
+
+@media(min-width: 768px){
+
+}
+
+@media(min-width: 992px){
+
+}
+
+@media(min-width: 1280px){
+
+}