From df3a3e6813cf091e61726db1f76267b809e00be7 Mon Sep 17 00:00:00 2001
From: Vojtech Mares <iam@vojtechmares.com>
Date: Mon, 3 Jan 2022 18:33:55 +0100
Subject: [PATCH] feat(ant.k8s.vxm.cz): make layout responsive

---
 sites/ant.k8s.vxm.cz/pages/index.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/sites/ant.k8s.vxm.cz/pages/index.tsx b/sites/ant.k8s.vxm.cz/pages/index.tsx
index 1bc3a36..9a01bb8 100644
--- a/sites/ant.k8s.vxm.cz/pages/index.tsx
+++ b/sites/ant.k8s.vxm.cz/pages/index.tsx
@@ -14,14 +14,16 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <h3 className="px-16 py-4 text-gray-600">ant.k8s.vxm.cz</h3>
-      <main className="px-16">
+      <h3 className="md:px-16 px-4 py-4 text-gray-600">
+        ant.k8s.vxm.cz
+      </h3>
+      <main className="md:px-16 px-4">
         <h1 className="font-sans font-bold text-4xl">
           Ant Kubernetes Cluster Signpost
         </h1>
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
           {sections.map((section) => (
-            <section key={section.name} className="mt-2 mx-2">
+            <section key={section.name} className="mt-2">
               <h2 className="font-sans font-semibold text-2xl mb-4">
                 {section.name}
               </h2>
@@ -36,7 +38,6 @@ const Home: NextPage = () => {
                       block
                       w-full
                       text-center
-                      mx-2
                       py-2
                       border-2
                       border-gray-400