diff --git a/__snapshots__/repo-summary-card--loading.png b/__snapshots__/repo-summary-card--loading.png
index 9e6081d..c1be485 100644
Binary files a/__snapshots__/repo-summary-card--loading.png and b/__snapshots__/repo-summary-card--loading.png differ
diff --git a/__snapshots__/repo-summary-card--long-and-no-spaces.png b/__snapshots__/repo-summary-card--long-and-no-spaces.png
index 40d13fe..48306c4 100644
Binary files a/__snapshots__/repo-summary-card--long-and-no-spaces.png and b/__snapshots__/repo-summary-card--long-and-no-spaces.png differ
diff --git a/__snapshots__/repo-summary-card--long-details.png b/__snapshots__/repo-summary-card--long-details.png
index 7ad551c..adcda7d 100644
Binary files a/__snapshots__/repo-summary-card--long-details.png and b/__snapshots__/repo-summary-card--long-details.png differ
diff --git a/__snapshots__/repo-summary-card--multiple-maintainers.png b/__snapshots__/repo-summary-card--multiple-maintainers.png
index 106966e..e9b27d4 100644
Binary files a/__snapshots__/repo-summary-card--multiple-maintainers.png and b/__snapshots__/repo-summary-card--multiple-maintainers.png differ
diff --git a/__snapshots__/repo-summary-card--no-details.png b/__snapshots__/repo-summary-card--no-details.png
index 1ac975b..2753283 100644
Binary files a/__snapshots__/repo-summary-card--no-details.png and b/__snapshots__/repo-summary-card--no-details.png differ
diff --git a/__snapshots__/repo-summary-card--short-details.png b/__snapshots__/repo-summary-card--short-details.png
index 40d6bd5..4263dbf 100644
Binary files a/__snapshots__/repo-summary-card--short-details.png and b/__snapshots__/repo-summary-card--short-details.png differ
diff --git a/__snapshots__/repo-summary-card.test.js.snap b/__snapshots__/repo-summary-card.test.js.snap
index 96c1238..79c56bf 100644
--- a/__snapshots__/repo-summary-card.test.js.snap
+++ b/__snapshots__/repo-summary-card.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
-<div class="my-2 rounded-lg bg-base-200 p-4"
+<div class="rounded-lg bg-base-200 p-4"
      style="min-height: 3.325rem;"
 >
   <a class="link-primary break-words"
@@ -37,7 +37,7 @@ exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
 `;
 
 exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
-<div class="my-2 rounded-lg bg-base-200 p-4"
+<div class="rounded-lg bg-base-200 p-4"
      style="min-height: 3.325rem;"
 >
   <a class="link-primary break-words"
@@ -73,7 +73,7 @@ exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
 `;
 
 exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
-<div class="my-2 rounded-lg bg-base-200 p-4"
+<div class="rounded-lg bg-base-200 p-4"
      style="min-height: 5.975rem;"
 >
   <a class="link-primary break-words"
@@ -143,7 +143,7 @@ exports[`Repo/Summary/Card Multiple Maintainers smoke-test 1`] = `
 `;
 
 exports[`Repo/Summary/Card No Details smoke-test 1`] = `
-<div class="my-2 rounded-lg bg-base-200 p-4"
+<div class="rounded-lg bg-base-200 p-4"
      style="min-height: 3.325rem;"
 >
   <a class="link-primary break-words"
@@ -173,7 +173,7 @@ exports[`Repo/Summary/Card No Details smoke-test 1`] = `
 `;
 
 exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
-<div class="my-2 rounded-lg bg-base-200 p-4"
+<div class="rounded-lg bg-base-200 p-4"
      style="min-height: 3.325rem;"
 >
   <a class="link-primary break-words"
@@ -209,7 +209,7 @@ exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
 `;
 
 exports[`Repo/Summary/Card loading smoke-test 1`] = `
-<div class="my-2 rounded-lg bg-base-200 p-4"
+<div class="rounded-lg bg-base-200 p-4"
      style="min-height: 3.325rem;"
 >
   <div class="skeleton mb-2 h-5 w-40">
diff --git a/__snapshots__/repo-summary-list--default.png b/__snapshots__/repo-summary-list--default.png
index 431422e..b074602 100644
Binary files a/__snapshots__/repo-summary-list--default.png and b/__snapshots__/repo-summary-list--default.png differ
diff --git a/__snapshots__/repo-summary-list--loading.png b/__snapshots__/repo-summary-list--loading.png
index c6f4613..1e1728b 100644
Binary files a/__snapshots__/repo-summary-list--loading.png and b/__snapshots__/repo-summary-list--loading.png differ
diff --git a/__snapshots__/repo-summary-list--multiple-maintainers.png b/__snapshots__/repo-summary-list--multiple-maintainers.png
index 3660e67..8f4dd65 100644
Binary files a/__snapshots__/repo-summary-list--multiple-maintainers.png and b/__snapshots__/repo-summary-list--multiple-maintainers.png differ
diff --git a/__snapshots__/repo-summary-list--no-title.png b/__snapshots__/repo-summary-list--no-title.png
index d0c2450..7bf1f23 100644
Binary files a/__snapshots__/repo-summary-list--no-title.png and b/__snapshots__/repo-summary-list--no-title.png differ
diff --git a/__snapshots__/repo-summary-list--partially-loaded.png b/__snapshots__/repo-summary-list--partially-loaded.png
index bd08037..ad6836e 100644
Binary files a/__snapshots__/repo-summary-list--partially-loaded.png and b/__snapshots__/repo-summary-list--partially-loaded.png differ
diff --git a/__snapshots__/repo-summary-list.test.js.snap b/__snapshots__/repo-summary-list.test.js.snap
index 6999359..f7972b4 100644
--- a/__snapshots__/repo-summary-list.test.js.snap
+++ b/__snapshots__/repo-summary-list.test.js.snap
@@ -7,8 +7,8 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
       Featured Repositories
     </h3>
   </div>
-  <div class>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+  <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <a class="link-primary break-words"
@@ -41,7 +41,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
         </ul>
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <a class="link-primary break-words"
@@ -74,7 +74,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
         </ul>
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <a class="link-primary break-words"
@@ -107,7 +107,7 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
         </ul>
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 5.975rem;"
     >
       <a class="link-primary break-words"
@@ -198,8 +198,8 @@ exports[`Repo/Summary/List Loading smoke-test 1`] = `
       Latest
     </h3>
   </div>
-  <div class>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+  <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <div class="skeleton mb-2 h-5 w-40">
@@ -207,7 +207,7 @@ exports[`Repo/Summary/List Loading smoke-test 1`] = `
       <div class="w-100 skeleton h-4">
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <div class="skeleton mb-2 h-5 w-40">
@@ -215,7 +215,7 @@ exports[`Repo/Summary/List Loading smoke-test 1`] = `
       <div class="w-100 skeleton h-4">
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <div class="skeleton mb-2 h-5 w-40">
@@ -234,8 +234,8 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
       Multiple Maintainers
     </h3>
   </div>
-  <div class>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+  <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 5.975rem;"
     >
       <a class="link-primary break-words"
@@ -302,7 +302,7 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
         </ul>
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <a class="link-primary break-words"
@@ -341,8 +341,8 @@ exports[`Repo/Summary/List Multiple Maintainers smoke-test 1`] = `
 
 exports[`Repo/Summary/List No Title smoke-test 1`] = `
 <div class="min-width">
-  <div class>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+  <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <a class="link-primary break-words"
@@ -375,7 +375,7 @@ exports[`Repo/Summary/List No Title smoke-test 1`] = `
         </ul>
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <a class="link-primary break-words"
@@ -419,8 +419,8 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
       Latest
     </h3>
   </div>
-  <div class>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+  <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <a class="link-primary break-words"
@@ -453,7 +453,7 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
         </ul>
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <a class="link-primary break-words"
@@ -486,7 +486,7 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
         </ul>
       </div>
     </div>
-    <div class="my-2 rounded-lg bg-base-200 p-4"
+    <div class="rounded-lg bg-base-200 p-4"
          style="min-height: 3.325rem;"
     >
       <div class="skeleton mb-2 h-5 w-40">