next

src/components/verifier/Cards.astro

@@ -41,6 +41,13 @@ const objects = ['steps', 'nested', 'stack'] as const;
     hyphens: auto;
   }
   .vcards__item :global(.vcards__object) { width: 100%; max-width: 14rem; justify-self: center; align-self: center; }
+  /* Hovering a card lets its grid recede, so the shape that carries the idea stands alone. */
+  @media (hover: hover) {
+    .vcards__item:hover {
+      --object-scale: 1.03;
+      --object-grid: 0.26;
+    }
+  }
   .vcards__body { max-width: 26em; }
   @media (min-width: 48rem) {
     .vcards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }