member responsiveness and max width for body

app/views/layouts/application.haml

@@ -32,7 +32,7 @@
     - if false
       %script{:src => "https://cdn.tailwindcss.com"}
 
-  %body
+  %body.max-w-screen-2xl.xl:mx-auto
     = render "layouts/header"
     = render "layouts/messages"
     = yield

app/views/members/index.html.haml

@@ -1,16 +1,15 @@
 = paginate @members
-.flex.justify-center
 
-  .grid.grid-cols-4
-    - @members.each do |member|
-      .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
-        =link_to member do
-          = image_for( member ,  class: "h-60 w-full object-cover")
-          %h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
-            = member.name
-          .p-2.text-xs.bg-gray-50.text-black.font-bold.text-center
-            = stayed member
-        %div.h-full
-          .p-5.text-center
-            .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
-              = shorten markdown(member.bio)
+.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-4
+  - @members.each do |member|
+    .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
+      =link_to member do
+        = image_for( member ,  class: "h-60 w-full object-cover")
+        %h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
+          = member.name
+        .p-2.text-xs.bg-gray-50.text-black.font-bold.text-center
+          = stayed member
+      %div.h-full
+        .p-5.text-center
+          .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
+            = shorten markdown(member.bio)