diff --git a/docs/components/capability-box/capability-box.module.css b/docs/components/capability-box/capability-box.module.css
index eb3b08f..abc3319 100644
--- a/docs/components/capability-box/capability-box.module.css
+++ b/docs/components/capability-box/capability-box.module.css
@@ -1,6 +1,8 @@
 .container {
   background-color: var(--color-primary);
   border-radius: var(--radius-3);
+  box-sizing: border-box;
+  height: 100%;
   padding: var(--size-4);
   text-align: left;
   min-height: 150px;
@@ -30,6 +32,6 @@
 
 @media (min-width: 1200px) {
   .container {
-    min-height: 160px;
+    min-height: 200px;
   }
 }
diff --git a/docs/styles/home.css b/docs/styles/home.css
index 62b4e4c..29f49ca 100644
--- a/docs/styles/home.css
+++ b/docs/styles/home.css
@@ -124,6 +124,11 @@ wcc-capability-box {
   }
 
   .capabilities-container {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: 1fr;
+    gap: var(--size-3);
+    align-items: stretch;
     width: 80%;
     margin: 0 auto;
     padding: 0;
@@ -136,15 +141,15 @@ wcc-capability-box {
   }
 
   wcc-capability-box {
-    display: inline-block;
-    width: 44%;
-    margin: var(--size-3);
-    vertical-align: top;
+    display: block;
+    width: 100%;
+    margin: 0;
   }
 }
 
 @media (min-width: 1200px) {
   .capabilities-container {
+    gap: var(--size-2);
     padding: var(--size-2);
   }
 
@@ -160,9 +165,8 @@ wcc-capability-box {
   }
 
   wcc-capability-box {
-    display: inline-block;
-    width: 47%;
-    margin: var(--size-2);
-    vertical-align: top;
+    display: block;
+    width: 100%;
+    margin: 0;
   }
 }