Change cards layout

_layouts/home.html

@@ -23,13 +23,16 @@ layout: default
       Building protocols and products at all layers of the stack including underlying transports, p2p overlays and
       routing, initial trust establishment, and semantics for things like group chat.
     </p>
-    <div class="work__cards container s:mx-auto flex flex-col sm:flex-row">
+    <div class="work__cards container s:mx-auto flex flex-col items-center sm:flex-row sm:items-stretch">
       <div
         class="
           work__card
           group
           flex flex-col
+          justify-between
           items-center
+          max-w-280 max-h-280
+          lg:max-w-436 lg:max-h-436
           border
           pt-5
           p-4
@@ -47,7 +50,7 @@ layout: default
           viewBox="0 0 65 64"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          class="mb-2 lg:mb-8 l:mt-28 w-16 h-16 fill-current group-hover:text-white"
+          class="mb-2 lg:mb-8 mt-4 l:mt-20 w-16 h-16 fill-current group-hover:text-white"
         >
           <g clip-path="url(#clip0)">
             <path
@@ -109,7 +112,7 @@ layout: default
         <p
           class="
             work__heading
-            mb-6
+            mb-9
             md:mb-5
             lg:mb-20 lg:uppercase
             font-semibold
@@ -120,7 +123,19 @@ layout: default
         >
           Waku
         </p>
-        <p class="work__text text-s lg:text-base opacity-75 text-left max-w-screen-xxs group-hover:text-white">
+        <p
+          class="
+            work__text
+            text-s
+            lg:text-base
+            mt-4
+            lg:mt-2.5
+            opacity-75
+            text-left
+            max-w-screen-xxs
+            group-hover:text-white
+          "
+        >
           A gossip based messaging protocol for private, secure, p2p messaging with implementations written in go, nim,
           java script.
         </p>
@@ -141,7 +156,10 @@ layout: default
           work__card
           group
           flex flex-col
+          justify-between
           items-center
+          max-w-280 max-h-280
+          lg:max-w-436 lg:max-h-436
           border
           pt-5
           p-4
@@ -157,7 +175,7 @@ layout: default
           viewBox="0 0 62 64"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          class="mb-2 lg:mb-8 l:mt-28 w-16 h-16 fill-current group-hover:text-peach"
+          class="mb-2 lg:mb-8 mt-4 l:mt-20 w-16 h-16 fill-current group-hover:text-peach"
         >
           <g clip-path="url(#clip0)">
             <path
@@ -182,7 +200,7 @@ layout: default
         <p
           class="
             work__heading
-            mb-6
+            mb-9
             md:mb-5
             lg:mb-20 lg:uppercase
             font-semibold
@@ -193,7 +211,19 @@ layout: default
         >
           DApp Connect
         </p>
-        <p class="work__text text-s lg:text-base opacity-75 text-left max-w-screen-xxs group-hover:text-peach">
+        <p
+          class="
+            work__text
+            text-s
+            lg:text-base
+            mt-4
+            lg:mt-2.5
+            opacity-75
+            text-left
+            max-w-screen-xxs
+            group-hover:text-peach
+          "
+        >
           The communication layer for Ethereum. A tech stack enabling decentralized communication between DApps and
           people.
         </p>

tailwind.config.js

@@ -3,16 +3,20 @@ module.exports = {
   purge: [`_site/**/*.html`, `_site/**/*.css`],
   theme: {
     extend: {
-      backgroundImage: (theme) => ({
+      backgroundImage: theme => ({
         arrow: 'url(/assets/img/arrow.svg)',
         arrowWhite: 'url(/assets/img/arrow-white.svg)',
         arrowPeach: 'url(/assets/img/arrow-peach.svg)',
       }),
       maxWidth: {
+        280: '280px',
+        436: '436px',
         48: '48%',
         80: '80%',
       },
       maxHeight: {
+        280: '280px',
+        436: '436px',
         nav: '350px',
       },
     },