From 3782c90647777591a6f15f71e821066a122df512 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 18 Dec 2020 02:37:32 +0100
Subject: [PATCH] Handle responsivness on Grid + Film components

---
 components/Film/index.vue   | 15 ++++++++++++++-
 components/Grid/index.vue   |  2 +-
 components/Header/index.vue |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/Film/index.vue b/components/Film/index.vue
index 69471e9..2ff90ee 100644
--- a/components/Film/index.vue
+++ b/components/Film/index.vue
@@ -1,6 +1,6 @@
 <template>
   <article
-    class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
+    class="film flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
   >
     <header class="p-4 rounded-t-md">
       <h1>
@@ -56,6 +56,19 @@ export default {
 </script>
 
 <style lang="css" scoped>
+@media screen and (min-width: 640px) {
+  .film {
+    margin: 1rem;
+    flex: 1 1 calc(50% - 2rem);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .film {
+    flex: 1 1 calc(33% - 2rem);
+  }
+}
+
 header {
   background-color: #85ffbd;
   background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
diff --git a/components/Grid/index.vue b/components/Grid/index.vue
index feb1bf8..20acd47 100644
--- a/components/Grid/index.vue
+++ b/components/Grid/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap justify-center">
     <Film :key="film.id" v-for="film in dataSource" :film="film" />
   </div>
 </template>
diff --git a/components/Header/index.vue b/components/Header/index.vue
index 0146da7..c89e0c6 100644
--- a/components/Header/index.vue
+++ b/components/Header/index.vue
@@ -1,7 +1,7 @@
 <template>
   <header
     id="header"
-    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md flex items-center justify-between"
+    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 md:px-8 py-3 shadow-md flex items-center justify-between"
   >
     <router-link to="/" class="flex w-auto h-full items-center">
       <img