diff --git a/src/components/Layout/Layout.styles.ts b/src/components/Layout/Layout.styles.ts
index c42036f..39c73c1 100644
--- a/src/components/Layout/Layout.styles.ts
+++ b/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;
+  }
 `
diff --git a/src/components/Section/HeroSection.tsx b/src/components/Section/HeroSection.tsx
index de31862..acb5f34 100644
--- a/src/components/Section/HeroSection.tsx
+++ b/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)``
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..e69de29