From be5a96a42aad211f83e32b66267bff31035b2c6c Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Fri, 27 Nov 2020 11:06:31 +0000
Subject: [PATCH] Responsive demo section

---
 src/shared/prerendered-app/Intro/style.css | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/shared/prerendered-app/Intro/style.css b/src/shared/prerendered-app/Intro/style.css
index e7c0a94c..ccf50e37 100644
--- a/src/shared/prerendered-app/Intro/style.css
+++ b/src/shared/prerendered-app/Intro/style.css
@@ -177,14 +177,18 @@
 
 .demos {
   display: grid;
-  gap: 6rem;
-  grid-auto-columns: 1fr;
-  grid-auto-flow: column;
+  gap: 3rem;
   justify-items: center;
   justify-content: center;
   padding: 0;
-  width: max-content;
   margin: 3rem auto;
+  --demo-size: 80px;
+  grid-template-columns: repeat(auto-fit, var(--demo-size));
+
+  @media (min-width: 740px) {
+    --demo-size: 100px;
+    gap: 6rem;
+  }
 
   & > li {
     display: block;
@@ -201,14 +205,13 @@
 }
 
 .demo-icon-container {
-  --size: 100px;
-  border-radius: var(--size);
+  border-radius: var(--demo-size);
   position: relative;
   overflow: hidden;
 }
 .demo-icon {
-  width: var(--size);
-  height: var(--size);
+  width: var(--demo-size);
+  height: var(--demo-size);
   display: block;
 }
 .demo-loader {