Регулируемая сетка и размер пикч

templates/static/css/manga_view.css

@@ -46,6 +46,15 @@ body {
     flex-direction: column;
 }
 
+
+
+/* Контейнер сетки */
+.manga-grid-container {
+    width: 100%;
+    padding: 10px 0;
+    overflow-x: auto; /* На случай узких экранов */
+}
+
 /* Сетка превью */
 .grid-container {
     width: 100%;
@@ -54,14 +63,20 @@ body {
 
 .manga-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    gap: 15px;
+    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+    gap: var(--grid-gap); /* Фиксированный отступ */
     justify-items: center;
+    margin: 0 auto;
+    max-width: calc(
+        (var(--preview-base-width) * var(--preview-scale) * var(--grid-columns)) +
+        (var(--grid-gap) * (var(--grid-columns) - 1))
+    );
 }
 
+/* Элементы превью */
 .manga-preview {
-    width: 100px;
-    height: 140px;
+    width: calc(var(--preview-base-width) * var(--preview-scale));
+    height: calc(var(--preview-base-height) * var(--preview-scale));
     overflow: hidden;
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
@@ -78,25 +93,22 @@ body {
     object-fit: cover;
 }
 
+
+
 /* Страница манги */
 .image-scaling-container {
     width: 100%;
-    flex: 1;
     display: flex;
     justify-content: center;
-    align-items: center;
-    margin-bottom: 20px;
 }
 
 .scalable-image {
-    max-width: var(--manga-page-width);
-    max-height: var(--manga-page-height);
-    width: auto;
+    width: calc(100% * var(--page-scale));
     height: auto;
+    max-width: 100%;
     object-fit: contain;
     box-shadow: 0 2px 10px rgba(0,0,0,0.2);
 }
-
 /* Футер */
 .footer-navigation {
     margin-top: auto;
@@ -140,16 +152,20 @@ body {
 }
 
 /* Адаптивность */
+@media (max-width: 1200px) {
+    :root { --grid-columns: 4; }
+}
+
 @media (max-width: 768px) {
-    .manga-grid {
-        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-    }
-    .manga-preview {
-        width: 80px;
-        height: 112px;
-    }
     :root {
-        --manga-page-width: 95vw;
-        --manga-page-height: 60vh;
+        --grid-columns: 3;
+        --preview-scale: 0.7;
+    }
+}
+
+@media (max-width: 480px) {
+    :root {
+        --grid-columns: 2;
+        --grid-gap: 10px; /* Можно уменьшить для мобилок */
     }
 }