diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 3ae2ccf..178b23c 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -11,19 +11,21 @@ const Home = ({ data, location }) => {
 
   return (
     <Layout location={location}>
-      <FullWidth className="projects">
-        {projects.map(({ node }) => {
-          const { slug, title, img } = node
+      <FullWidth>
+        <div className={styles.projects}>
+          {projects.map(({ node }) => {
+            const { slug, title, img } = node
 
-          return (
-            <article className={styles.project} key={slug}>
-              <Link to={slug}>
-                <h1 className={styles.title}>{title}</h1>
-                <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
-              </Link>
-            </article>
-          )
-        })}
+            return (
+              <article className={styles.project} key={slug}>
+                <Link to={slug}>
+                  <h1 className={styles.title}>{title}</h1>
+                  <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
+                </Link>
+              </article>
+            )
+          })}
+        </div>
       </FullWidth>
     </Layout>
   )
@@ -45,7 +47,9 @@ export const IndexQuery = graphql`
           slug
           img {
             childImageSharp {
-              ...ProjectImageFluid
+              fluid(maxWidth: 990, quality: 85) {
+                ...GatsbyImageSharpFluid_withWebp
+              }
             }
           }
         }
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 33d30ca..e189e70 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -1,14 +1,21 @@
 @import 'variables';
 
+.projects {
+    @media (min-width: 55rem) {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        max-width: $projectImageMaxWidth;
+        margin: 0 auto;
+    }
+}
+
 .project {
+    flex: 0 0 calc(50% - #{$spacer * 2});
     text-align: center;
     margin-bottom: $spacer * 4;
     position: relative;
 
-    @media (min-width: 30rem) {
-        margin-bottom: $spacer * 8;
-    }
-
     &:last-child {
         margin-bottom: 0;
     }
@@ -18,10 +25,6 @@
         position: relative;
         margin: 0 auto;
 
-        @media (min-width: $projectImageMaxWidth) {
-            max-width: $projectImageMaxWidth;
-        }
-
         &::after {
             content: '';
             position: absolute;