From a43aaa5e22ab6c8186d0271f1caac8302f14667d Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Thu, 10 Sep 2026 21:35:49 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20case-media-gallery--wide=20=E2=80=94=20?=
 =?UTF-8?q?4=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BA=D0=B8,=20=D0=B2=D1=8B?=
 =?UTF-8?q?=D1=85=D0=BE=D0=B4=20=D0=B7=D0=B0=20=D0=BA=D0=BE=D0=BB=D0=BE?=
 =?UTF-8?q?=D0=BD=D0=BA=D1=83=20=D0=BA=D0=B0=D0=BA=20=D1=83=20case-media--?=
 =?UTF-8?q?wide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/cases/template-elements-demo/index.html | 4 ++--
 public/css/main.css                            | 8 ++++++++
 src/pages/cases/template-elements-demo.html    | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/cases/template-elements-demo/index.html b/public/cases/template-elements-demo/index.html
index ec7b4b5..85dc365 100644
--- a/public/cases/template-elements-demo/index.html
+++ b/public/cases/template-elements-demo/index.html
@@ -401,9 +401,9 @@
 
         <h3>Галерея: сетка на ширину страницы с боковыми отступами</h3>
         <p class="section__prose">
-          Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь две колонки на широком экране (<code>--case-gallery-cols: 2</code>).
+          Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь четыре колонки на широком экране (<code>--case-gallery-cols: 4</code>).
         </p>
-        <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
+        <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 4">
           <div class="case-media-gallery__grid">
             <div class="case-media-gallery__item">
               <img src="../../assets/template-elements-demo/small-image-1.webp" alt="Wide-сетка, кадр 1" loading="lazy" decoding="async" data-image-viewer />
diff --git a/public/css/main.css b/public/css/main.css
index b61209a..ad84b3a 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1928,6 +1928,14 @@ video:-webkit-full-screen {
   --case-gallery-cols: 3;
 }
 
+/* Wide-галерея: 4 колонки и выход за колонку контента (как у .case-media--wide) */
+.case-media-gallery--wide {
+  --case-gallery-cols: 4;
+  width: min(calc(100vw - (max(var(--space), env(safe-area-inset-left)) + max(var(--space), env(safe-area-inset-right)))), calc(100% + 8rem));
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
 .case-media-gallery > figcaption {
   width: 100%;
   text-align: center;
diff --git a/src/pages/cases/template-elements-demo.html b/src/pages/cases/template-elements-demo.html
index bd592ba..657c695 100644
--- a/src/pages/cases/template-elements-demo.html
+++ b/src/pages/cases/template-elements-demo.html
@@ -212,9 +212,9 @@
 
         <h3>Галерея: сетка на ширину страницы с боковыми отступами</h3>
         <p class="section__prose">
-          Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь две колонки на широком экране (<code>--case-gallery-cols: 2</code>).
+          Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь четыре колонки на широком экране (<code>--case-gallery-cols: 4</code>).
         </p>
-        <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
+        <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 4">
           <div class="case-media-gallery__grid">
             <div class="case-media-gallery__item">
               <img src="{{assetPrefix}}assets/template-elements-demo/small-image-1.webp" alt="Wide-сетка, кадр 1" loading="lazy" decoding="async" data-image-viewer />