Make color swatches less squishy wishy on medium-ish screens

Author: adamwathan

docs/source/docs/colors.blade.md

@@ -11,8 +11,8 @@ Developing an organized, consistent and beautiful color palette is critical to t
 
 To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to [customize](#customizing) them for your project.
 
-<div class="flex flex-wrap -mx-4 my-8">
-  <div class="w-full md:w-1/3 px-4">
+<div class="flex flex-wrap -mx-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Grey</div>
@@ -61,9 +61,8 @@ To get you started, we've provided a generous palette of great looking colors th
   </div>
 </div>
 
-
-<div class="flex flex-wrap -mx-4 mb-8">
-  <div class="w-full md:w-1/3 px-4">
+<div class="flex flex-wrap -mx-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-red px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Red</div>
@@ -102,7 +101,7 @@ To get you started, we've provided a generous palette of great looking colors th
       </div>
     </div>
   </div>
-  <div class="w-full md:w-1/3 px-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-orange px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Orange</div>
@@ -141,7 +140,7 @@ To get you started, we've provided a generous palette of great looking colors th
       </div>
     </div>
   </div>
-  <div class="w-full md:w-1/3 px-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-yellow-darkest bg-yellow px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Yellow</div>
@@ -180,10 +179,7 @@ To get you started, we've provided a generous palette of great looking colors th
       </div>
     </div>
   </div>
-</div>
-
-<div class="flex flex-wrap -mx-4 mb-8">
-  <div class="w-full md:w-1/3 px-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-green px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Green</div>
@@ -222,7 +218,7 @@ To get you started, we've provided a generous palette of great looking colors th
       </div>
     </div>
   </div>
-  <div class="w-full md:w-1/3 px-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-teal px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Teal</div>
@@ -261,7 +257,7 @@ To get you started, we've provided a generous palette of great looking colors th
       </div>
     </div>
   </div>
-  <div class="w-full md:w-1/3 px-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-blue px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Blue</div>
@@ -300,10 +296,7 @@ To get you started, we've provided a generous palette of great looking colors th
       </div>
     </div>
   </div>
-</div>
-
-<div class="flex flex-wrap -mx-4 mb-8">
-  <div class="w-full md:w-1/3 px-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-indigo px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Indigo</div>
@@ -342,7 +335,7 @@ To get you started, we've provided a generous palette of great looking colors th
       </div>
     </div>
   </div>
-  <div class="w-full md:w-1/3 px-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-purple px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Purple</div>
@@ -381,7 +374,7 @@ To get you started, we've provided a generous palette of great looking colors th
       </div>
     </div>
   </div>
-  <div class="w-full md:w-1/3 px-4">
+  <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-pink px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Pink</div>