docs: fix the Studio next-step card collapsing into a full-width screenshot

The card measured 686px of image inside a 688px card: the theme's prose styles set
img { width: 100% }, which beats a sm:w-64 utility on the image itself, so the
side-by-side layout collapsed and the card's own text was pushed out of view. The
width now lives on a wrapper the prose rules do not touch, with the image filling
it and anchored right so the thumbnail lands on the Renders panel rather than a
crop of empty canvas.

Recorded the rule in AGENTS.md, along with the related margin behaviour that put a
black band around the introduction hero, so neither is rediscovered.

Author: ukimsanov

docs/AGENTS.md

@@ -73,6 +73,22 @@ Mintlify compiles `.jsx` / `.tsx` from `docs/snippets/`. Use one when a native c
 - Client-side only: guard anything touching `window` and give every component a sensible first paint.
 - Respect `prefers-reduced-motion`, give interactive elements a visible focus state, and never make a component the only route to information.
 
+### Raw HTML gotchas
+
+The theme's prose styles win against utility classes on media elements. `img`
+gets `width: 100%`, so a class like `sm:w-64` on the image itself is ignored and a
+side-by-side card collapses into a full-width picture with its text pushed out of
+view. Put the width on a wrapper element and let the image fill it:
+
+```html
+<div className="w-full sm:w-64 shrink-0 aspect-video overflow-hidden">
+  <img className="w-full h-full object-cover" src="..." alt="..." />
+</div>
+```
+
+The same styles add a 2em margin to media, which shows as a band inside any
+wrapper that has its own background. Zero it when the wrapper is the frame.
+
 ### Width and media
 
 The content column is widened in `custom.css` — a measured 888px at a 1600px viewport, 1048px at 1920px, where it used to be stuck at 664px. There is no paragraph measure cap: these pages are built from lists, tables, cards, and code, so a whole guide contains roughly three `<p>` elements and capping them changed nothing. Add `className="hf-wide"` when a visual should escape any inherited measure.

docs/studio/index.mdx

@@ -107,11 +107,13 @@ Before sharing:
 5. Watch the exported file once.
 
 <a href="/studio/export" className="not-prose group flex flex-col sm:flex-row no-underline overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 hover:border-zinc-400 dark:hover:border-zinc-600 transition-colors my-6">
-  <img
-    className="w-full sm:w-64 shrink-0 aspect-video object-cover bg-zinc-100 dark:bg-zinc-900"
-    src="/images/studio/export.jpg"
-    alt="The Renders panel in HyperFrames Studio, showing format and resolution options"
-  />
+  <div className="w-full sm:w-64 shrink-0 aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-900">
+    <img
+      className="w-full h-full object-cover object-right"
+      src="/images/studio/export.jpg"
+      alt="The Renders panel in HyperFrames Studio, showing format and resolution options"
+    />
+  </div>
   <div className="p-5">
     <span className="text-[11px] font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400">When it is ready</span>
     <span className="mt-1 block text-lg font-semibold text-zinc-900 dark:text-zinc-100">Export a version →</span>