Fix styling

src/pages/index.js

@@ -144,19 +144,21 @@ class Home extends Component {
         <Container>
           <div css={[sharedStyles.markdown, markdownStyles]}>
             <section
-              className="home-section"
+              css={[
-              css={{
+                sectionStyles,
-                [media.lessThan('medium')]: {
+                {
-                  marginTop: 0,
+                  [media.lessThan('medium')]: {
-                  marginBottom: 0,
+                    marginTop: 0,
-                  overflowX: 'auto',
+                    marginBottom: 0,
-                  paddingTop: 30,
+                    overflowX: 'auto',
-                  WebkitOverflowScrolling: 'touch',
+                    paddingTop: 30,
-                  position: 'relative',
+                    WebkitOverflowScrolling: 'touch',
-                  maskImage:
+                    position: 'relative',
-                    'linear-gradient(to right, transparent, white 10px, white 90%, transparent)',
+                    maskImage:
+                      'linear-gradient(to right, transparent, white 10px, white 90%, transparent)',
+                  },
                 },
-              }}>
+              ]}>
               <div
                 css={{
                   display: 'flex',
@@ -233,7 +235,7 @@ class Home extends Component {
                 borderBottom: `1 solid ${colors.divider}`,
               }}
             />
-            <section className="home-section">
+            <section css={sectionStyles}>
               <div id="examples">
                 <div className="example">
                   <h3>A Simple Component</h3>
@@ -385,18 +387,18 @@ export const pageQuery = graphql`
 
 export default Home;
 
-// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names.
+const sectionStyles = {
-const markdownStyles = {
+  marginTop: 20,
-  '& .home-section': {
+  marginBottom: 15,
-    marginTop: 20,
-    marginBottom: 15,
 
-    [media.greaterThan('medium')]: {
+  [media.greaterThan('medium')]: {
-      marginTop: 60,
+    marginTop: 60,
-      marginBottom: 65,
+    marginBottom: 65,
-    },
   },
+};
 
+// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names.
+const markdownStyles = {
   '& .example': {
     marginTop: 40,