Make testimonial preview responsive (#84)

- adjust testimonial preview surface to respect responsive widths while keeping the social-media aspect ratio
- make the inner card width clamp so it scales down on narrow screens

------
[Codex Task](https://chatgpt.com/codex/tasks/task_e_693da17824d48325b6baa5660ed1b1ee)

Author: rodrigogiraoserrao

testimonial-card-generator.html

@@ -11,7 +11,7 @@
             --card-width: 720px;
             --card-padding: 32px;
             --image-width: 1200px;
-            --image-height: 675px;
+            --image-height: 630px;
         }
 
         .layout {
@@ -93,8 +93,7 @@
         }
 
         .image-space {
-            width: var(--image-width);
-            max-width: 100%;
+            width: min(100%, var(--image-width));
             aspect-ratio: calc(var(--image-width) / var(--image-height));
             background: var(--bg-2);
             border: 1px solid var(--ui-2);
@@ -103,21 +102,23 @@
             justify-content: center;
             align-items: center;
             overflow: hidden;
+            margin-inline: auto;
         }
 
         .render-surface {
-            width: var(--image-width);
-            height: var(--image-height);
+            width: min(100%, var(--image-width));
+            max-width: var(--image-width);
+            aspect-ratio: calc(var(--image-width) / var(--image-height));
             display: flex;
             justify-content: center;
             align-items: center;
-            background: var(--bg);
+            background: transparent;
             padding: clamp(1.5rem, 3vw, 2rem);
         }
 
         .card {
-            width: var(--card-width);
-            max-width: min(90%, 820px);
+            width: clamp(280px, 75vw, var(--card-width));
+            max-width: min(100%, 820px);
             background: linear-gradient(135deg, var(--bg), var(--bg-2));
             padding: var(--card-padding);
             border-radius: var(--radius-lg);