Fix styling

src/pages/index.js

@@ -144,8 +144,9 @@ class Home extends Component {
         <Container>
           <div css={[sharedStyles.markdown, markdownStyles]}>
             <section
-              className="home-section"
+              css={[
-              css={{
+                sectionStyles,
+                {
                   [media.lessThan('medium')]: {
                     marginTop: 0,
                     marginBottom: 0,
@@ -156,7 +157,8 @@ class Home extends Component {
                     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,9 +387,7 @@ 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 = {
-  '& .home-section': {
   marginTop: 20,
   marginBottom: 15,
 
@@ -395,8 +395,10 @@ const markdownStyles = {
     marginTop: 60,
     marginBottom: 65,
   },
-  },
+};
 
+// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names.
+const markdownStyles = {
   '& .example': {
     marginTop: 40,