From 09111a946c5959c827f7a5badde6233488fb36d7 Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Thu, 24 Sep 2026 22:40:58 +0200
Subject: [PATCH] =?UTF-8?q?fix(ai-assistant-figma):=20=D1=80=D0=B5=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=80=20=D0=BA=D0=B0=D1=80=D1=82=D0=B8=D0=BD=D0=BE=D0=BA=20(ca?=
 =?UTF-8?q?se-media--real=20=D0=B2=D0=BC=D0=B5=D1=81=D1=82=D0=BE=20wide)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/cases/ai-assistant-figma/index.html    | 27 ++++++++++++++-----
 public/en/cases/ai-assistant-figma/index.html | 27 ++++++++++++++-----
 src/pages/cases/ai-assistant-figma.en.html    | 27 ++++++++++++++-----
 src/pages/cases/ai-assistant-figma.html       | 27 ++++++++++++++-----
 4 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/public/cases/ai-assistant-figma/index.html b/public/cases/ai-assistant-figma/index.html
index 4113b65..9377218 100644
--- a/public/cases/ai-assistant-figma/index.html
+++ b/public/cases/ai-assistant-figma/index.html
@@ -241,6 +241,21 @@
       .case-article a:not(.btn) {
         color: var(--accent);
       }
+      /* Реальный размер картинки: натуральная ширина в пикселях, ограниченная колонкой */
+      .case-media--real {
+        width: auto;
+        margin-inline: auto;
+        margin-left: auto;
+        transform: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .case-media--real img {
+        width: auto;
+        max-width: 100%;
+        margin-inline: auto;
+      }
     </style>
     <script>
       (function () {
@@ -422,7 +437,7 @@
           Плагин добавляет в Figma панель AI-ассистента: от списка готовых сценариев до
           редактора скриптов с логом выполнения. Ниже — ключевые экраны работы.
         </p>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Список скриптов AI-ассистента"
@@ -433,7 +448,7 @@
           />
           <figcaption>Список доступных скриптов ассистента.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Редактор скриптов AI-ассистента"
@@ -444,7 +459,7 @@
           />
           <figcaption>Редактор скрипта с подсветкой и AI-подсказками.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Лог выполнения скрипта AI-ассистента"
@@ -455,7 +470,7 @@
           />
           <figcaption>Представление лога выполнения скрипта.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Индикатор работы скрипта AI-ассистента"
@@ -466,7 +481,7 @@
           />
           <figcaption>Индикатор активного выполнения скрипта.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Live Mode AI-ассистента"
@@ -477,7 +492,7 @@
           />
           <figcaption>Live Mode — интерактивный режим ассистента.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Меню More AI-ассистента"
diff --git a/public/en/cases/ai-assistant-figma/index.html b/public/en/cases/ai-assistant-figma/index.html
index f4ac2d1..c471062 100644
--- a/public/en/cases/ai-assistant-figma/index.html
+++ b/public/en/cases/ai-assistant-figma/index.html
@@ -241,6 +241,21 @@
       .case-article a:not(.btn) {
         color: var(--accent);
       }
+      /* Реальный размер картинки: натуральная ширина в пикселях, ограниченная колонкой */
+      .case-media--real {
+        width: auto;
+        margin-inline: auto;
+        margin-left: auto;
+        transform: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .case-media--real img {
+        width: auto;
+        max-width: 100%;
+        margin-inline: auto;
+      }
     </style>
     <script>
       (function () {
@@ -422,7 +437,7 @@
           The plugin adds an AI assistant panel to Figma — from a list of ready-made
           scenarios to a script editor with an execution log. Key screens below.
         </p>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script list"
@@ -433,7 +448,7 @@
           />
           <figcaption>List of available assistant scripts.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script editor"
@@ -444,7 +459,7 @@
           />
           <figcaption>Script editor with highlighting and AI hints.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script execution log"
@@ -455,7 +470,7 @@
           />
           <figcaption>Script execution log view.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant running indicator"
@@ -466,7 +481,7 @@
           />
           <figcaption>Active script execution indicator.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant Live Mode"
@@ -477,7 +492,7 @@
           />
           <figcaption>Live Mode — interactive assistant mode.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant More menu"
diff --git a/src/pages/cases/ai-assistant-figma.en.html b/src/pages/cases/ai-assistant-figma.en.html
index 0840a22..58dda6f 100644
--- a/src/pages/cases/ai-assistant-figma.en.html
+++ b/src/pages/cases/ai-assistant-figma.en.html
@@ -33,6 +33,21 @@
       .case-article a:not(.btn) {
         color: var(--accent);
       }
+      /* Реальный размер картинки: натуральная ширина в пикселях, ограниченная колонкой */
+      .case-media--real {
+        width: auto;
+        margin-inline: auto;
+        margin-left: auto;
+        transform: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .case-media--real img {
+        width: auto;
+        max-width: 100%;
+        margin-inline: auto;
+      }
     </style>
     <script>
       (function () {
@@ -109,7 +124,7 @@
           The plugin adds an AI assistant panel to Figma — from a list of ready-made
           scenarios to a script editor with an execution log. Key screens below.
         </p>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script list"
@@ -120,7 +135,7 @@
           />
           <figcaption>List of available assistant scripts.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script editor"
@@ -131,7 +146,7 @@
           />
           <figcaption>Script editor with highlighting and AI hints.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant script execution log"
@@ -142,7 +157,7 @@
           />
           <figcaption>Script execution log view.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant running indicator"
@@ -153,7 +168,7 @@
           />
           <figcaption>Active script execution indicator.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant Live Mode"
@@ -164,7 +179,7 @@
           />
           <figcaption>Live Mode — interactive assistant mode.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="AI assistant More menu"
diff --git a/src/pages/cases/ai-assistant-figma.html b/src/pages/cases/ai-assistant-figma.html
index a253e85..a24c6b8 100644
--- a/src/pages/cases/ai-assistant-figma.html
+++ b/src/pages/cases/ai-assistant-figma.html
@@ -33,6 +33,21 @@
       .case-article a:not(.btn) {
         color: var(--accent);
       }
+      /* Реальный размер картинки: натуральная ширина в пикселях, ограниченная колонкой */
+      .case-media--real {
+        width: auto;
+        margin-inline: auto;
+        margin-left: auto;
+        transform: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .case-media--real img {
+        width: auto;
+        max-width: 100%;
+        margin-inline: auto;
+      }
     </style>
     <script>
       (function () {
@@ -109,7 +124,7 @@
           Плагин добавляет в Figma панель AI-ассистента: от списка готовых сценариев до
           редактора скриптов с логом выполнения. Ниже — ключевые экраны работы.
         </p>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Список скриптов AI-ассистента"
@@ -120,7 +135,7 @@
           />
           <figcaption>Список доступных скриптов ассистента.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Редактор скриптов AI-ассистента"
@@ -131,7 +146,7 @@
           />
           <figcaption>Редактор скрипта с подсветкой и AI-подсказками.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Лог выполнения скрипта AI-ассистента"
@@ -142,7 +157,7 @@
           />
           <figcaption>Представление лога выполнения скрипта.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Индикатор работы скрипта AI-ассистента"
@@ -153,7 +168,7 @@
           />
           <figcaption>Индикатор активного выполнения скрипта.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Live Mode AI-ассистента"
@@ -164,7 +179,7 @@
           />
           <figcaption>Live Mode — интерактивный режим ассистента.</figcaption>
         </figure>
-        <figure class="case-media case-media--wide">
+        <figure class="case-media case-media--real">
           <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             alt="Меню More AI-ассистента"