From f0d1a0112090e9febe31b39b4172c2b8c1c7be90 Mon Sep 17 00:00:00 2001
From: Stepan <stepan.naryshkov@gmail.com>
Date: Tue, 23 Apr 2019 20:48:21 +0300
Subject: [PATCH] =?UTF-8?q?links=20Get=20started=20and=20Take=20the=20Tuto?=
 =?UTF-8?q?rial=20have=20been=20relocated=20in=20mobile=E2=80=A6=20(#1857)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.js | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 790efd43..976fddb0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -62,7 +62,7 @@ class Home extends Component {
             <div
               css={{
                 paddingTop: 45,
-                paddingBottom: 20,
+                paddingBottom: 10,
 
                 [media.greaterThan('small')]: {
                   paddingTop: 60,
@@ -137,8 +137,11 @@ class Home extends Component {
                   </p>
                   <Flex
                     valign="center"
+                    halign="center"
                     css={{
                       paddingTop: 40,
+                      flexWrap: 'wrap',
+                      justifyContent: 'center',
 
                       [media.greaterThan('xlarge')]: {
                         paddingTop: 65,
@@ -279,10 +282,16 @@ class Home extends Component {
               background: colors.dark,
               color: colors.white,
               paddingTop: 45,
-              paddingBottom: 45,
+              paddingBottom: 25,
             }}>
             <Container>
-              <Flex valign="center">
+              <Flex
+                valign="center"
+                halign="center"
+                css={{
+                  flexWrap: 'wrap',
+                  justifyContent: 'center',
+                }}>
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
                     Get Started
@@ -312,8 +321,6 @@ Home.propTypes = {
 const CtaItem = ({children, primary = false}) => (
   <div
     css={{
-      width: '50%',
-
       [media.between('small', 'large')]: {
         paddingLeft: 20,
       },
@@ -324,13 +331,22 @@ const CtaItem = ({children, primary = false}) => (
 
       '&:first-child': {
         textAlign: 'right',
-        paddingRight: 15,
+        paddingRight: 7,
+        paddingLeft: 7,
+        [media.lessThan('small')]: {
+          marginBottom: 10,
+        },
       },
 
       '&:nth-child(2)': {
+        paddingRight: 7,
+        paddingLeft: 7,
         [media.greaterThan('small')]: {
           paddingLeft: 15,
         },
+        [media.lessThan('small')]: {
+          marginBottom: 10,
+        },
       },
     }}>
     {children}