Fix product link pills consistently across overview cards (#754)

* fix: align product link pills between overview cards

* fix: improve engine studio card alignment on smaller screens

* rework

---------

Co-authored-by: daedalus <44623501+ComfortablyCoding@users.noreply.github.com>

Author: subhrat123

content/_partials/engine-studio-box.md

@@ -1,9 +1,12 @@
-::u-page-grid{class="lg:grid-cols-2"}
+::u-page-grid{class="lg:grid-cols-2 sm:grid-rows-[auto_auto] sm:gap-y-0"}
   :::u-page-card
   ---
   title: APIs and Developer Tools
   description: Build with REST, GraphQL, the SDK, realtime, auth, and Flows.
   color: purple
+  ui:
+    root: "sm:grid sm:grid-rows-subgrid sm:row-span-2"
+    container: "sm:grid! sm:grid-rows-subgrid sm:row-span-2 sm:gap-y-4"
   ---
   :product-link{product="connect"} :product-link{product="realtime"} :product-link{product="auth"} :product-link{product="automate"}
   :::
@@ -13,6 +16,9 @@
   title: Data Studio
   description: A web app for your whole team to manage content, files, users, and dashboards.
   color: pink
+  ui:
+    root: "sm:grid sm:grid-rows-subgrid sm:row-span-2"
+    container: "sm:grid! sm:grid-rows-subgrid sm:row-span-2 sm:gap-y-4"
   ---
   :product-link{product="insights"} :product-link{product="files"}
   :::