Improve main page layout

src/client/components/main_layout/Main.js

@@ -15,11 +15,6 @@ const styles = theme => ({
       overflow: 'auto'
     }
   },
-  heroContent: {
-    maxWidth: 1100,
-    paddingTop: theme.spacing(3),
-    paddingBottom: theme.spacing(1)
-  },
   layout: {
     width: 'auto',
     marginLeft: theme.spacing(3),
@@ -30,6 +25,10 @@ const styles = theme => ({
       marginRight: 'auto'
     }
   },
+  heroContent: {
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(1)
+  },
   licenceText: {
     marginTop: theme.spacing(0.5),
     fontSize: '0.7em'
@@ -52,13 +51,9 @@ const Main = props => {
             {intl.get('selectPerspective')}
           </Typography>
         </div>
-      </div>
-      <div className={classes.layout}>
         <Grid container spacing={1}>
           {props.perspectives.map(perspective => <MainCard key={perspective.id} perspective={perspective} />)}
         </Grid>
-      </div>
-      <div className={classes.layout}>
         <Typography className={classes.licenceText}>{intl.getHTML('mainPageImageLicence')}</Typography>
       </div>
     </div>

src/client/components/main_layout/MainCard.js

@@ -22,6 +22,10 @@ const useStyles = makeStyles(theme => ({
       backgroundSize: 'cover',
       backgroundPosition: 'center'
     },
+    [theme.breakpoints.up('lg')]: {
+      height: 180,
+      backgroundSize: 'cover'
+    },
     '&:hover': {
       background: `linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url(${props.perspective.frontPageImage})`
     }
@@ -35,7 +39,7 @@ const MainCard = props => {
     <Grid
       className={classes.link}
       key={perspective.id}
-      item xs={12} sm={4} md
+      item xs={12} sm={4} md lg={4}
       component={Link}
       to={`/${perspective.id}/faceted-search`}
     >