From 7aaec57e6f3956a9340ebaccedf35c1a74eb5202 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git2@kat.cafe>
Date: Mon, 22 May 2023 21:21:12 -0400
Subject: [PATCH] make responsive

---
 app/components/index-world.css.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/components/index-world.css.ts b/app/components/index-world.css.ts
index 5f2b720..0f504a4 100644
--- a/app/components/index-world.css.ts
+++ b/app/components/index-world.css.ts
@@ -4,6 +4,17 @@ export const container = style({
   background: "#333",
   flexBasis: "30%",
   margin: "0.5rem",
+
+  "@media": {
+    // under 600px
+    "screen and (max-width: 600px)": {
+      flexBasis: "100%",
+    },
+    // between 600px and 1000px
+    "screen and (min-width: 600px) and (max-width: 1000px)": {
+      flexBasis: "45%",
+    },
+  },
 });
 
 export const header = style({