From c4111ac5713279d7e5012f1de6ff83e022c1a90c Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 8 Sep 2020 22:28:56 +0100
Subject: [PATCH] Make things responsive

---
 src/App.vue                           | 4 ++--
 src/components/our-sponsors/index.vue | 2 +-
 src/components/recent-talks/index.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 80affef..7489b0e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,8 +18,8 @@
     </aside>
 
     <footer class="py-20 bg-black">
-      <div class="max-w-6xl mx-auto">
-        <div class="grid grid-cols-3">
+      <div class="max-w-6xl mx-auto px-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
           <section>
             <h2 class="pb-2 text-xl font-bold border-b-2 text-white">Links</h2>
 
diff --git a/src/components/our-sponsors/index.vue b/src/components/our-sponsors/index.vue
index 1a01415..8754c21 100644
--- a/src/components/our-sponsors/index.vue
+++ b/src/components/our-sponsors/index.vue
@@ -4,7 +4,7 @@
 
     <div class="mt-10">
       <div class="max-w-6xl mx-auto px-4">
-        <div class="grid grid-cols-3 gap-16">
+        <div class="grid grid-cols-1 gap-16 sm:grid-cols-2 md:grid-cols-3">
           <div v-for="(sponsor, i) in sponsors" :key="i">
             <sponsor :sponsor="sponsor"/>
           </div>
diff --git a/src/components/recent-talks/index.vue b/src/components/recent-talks/index.vue
index 74941f1..0a352d4 100644
--- a/src/components/recent-talks/index.vue
+++ b/src/components/recent-talks/index.vue
@@ -3,7 +3,7 @@
     <div class="mx-auto px-4">
       <h2 class="text-2xl font-bold uppercase text-center">Recent Talks</h2>
 
-      <div class="mt-2 grid grid-cols-4 gap-8">
+      <div class="mt-2 grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         <recent-talk v-for="(talk, i) in talks" :key="i" :talk="talk"/>
       </div>
     </div>