From 19aa3da68bac480dfbdbba289fee5c12a5899180 Mon Sep 17 00:00:00 2001
From: MM20 <15646950+MM2-0@users.noreply.github.com>
Date: Sun, 9 Oct 2022 23:05:18 +0200
Subject: [PATCH] Docs: change screenshot size and spacing

---
 .../components/HomepageScreenshots/index.tsx  | 24 ++++++++++++++-----
 .../HomepageScreenshots/styles.module.css     |  8 +++++++
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/docs/src/components/HomepageScreenshots/index.tsx b/docs/src/components/HomepageScreenshots/index.tsx
index 4d42c2a4..87e8fab2 100644
--- a/docs/src/components/HomepageScreenshots/index.tsx
+++ b/docs/src/components/HomepageScreenshots/index.tsx
@@ -8,24 +8,36 @@ export default function HomepageScreenshots(): JSX.Element {
       <div className="container padding-vert--xl">
         <div className="row">
           <div className="col col--4">
-            <img src="img/screenshot-1.png"></img>
+            <div className={styles.screenshot}>
+              <img src="img/screenshot-1.png"></img>
+            </div>
           </div>
           <div className="col col--4">
-            <img src="img/screenshot-2.png"></img>
+            <div className={styles.screenshot}>
+              <img src="img/screenshot-2.png"></img>
+            </div>
           </div>
           <div className="col col--4">
-            <img src="img/screenshot-3.png"></img>
+            <div className={styles.screenshot}>
+              <img src="img/screenshot-3.png"></img>
+            </div>
           </div>
         </div>
         <div className="row">
           <div className="col col--4">
-            <img src="img/screenshot-4.png"></img>
+            <div className={styles.screenshot}>
+              <img src="img/screenshot-4.png"></img>
+            </div>
           </div>
           <div className="col col--4">
-            <img src="img/screenshot-5.png"></img>
+            <div className={styles.screenshot}>
+              <img src="img/screenshot-5.png"></img>
+            </div>
           </div>
           <div className="col col--4">
-            <img src="img/screenshot-6.png"></img>
+            <div className={styles.screenshot}>
+              <img src="img/screenshot-6.png"></img>
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/src/components/HomepageScreenshots/styles.module.css b/docs/src/components/HomepageScreenshots/styles.module.css
index e69de29b..8b025efd 100644
--- a/docs/src/components/HomepageScreenshots/styles.module.css
+++ b/docs/src/components/HomepageScreenshots/styles.module.css
@@ -0,0 +1,8 @@
+.screenshot {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 4rem;
+}
+.screenshot > img {
+  max-width: 350px;
+}