From efb33bdf59719dc33376d552b76afb53729141a7 Mon Sep 17 00:00:00 2001
From: Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
Date: Tue, 1 Jul 2025 22:14:11 +0700
Subject: [PATCH] updated column width calculation

---
 index.css | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/index.css b/index.css
index ab36374..d16ca5b 100644
--- a/index.css
+++ b/index.css
@@ -7,17 +7,23 @@
 @layer system {
   section#wrap {
     --wrap-padding: 1rem;
-    --image-diameter: 120px;
     --gap: 1rem;
     --columns: 4;
+    --image-diameter: unset;
+    --image-width: var(
+      --image-diameter,
+      calc(
+        100% / var(--columns, 4) - var(--gap, 1rem) * (var(--columns, 4) - 1) /
+          var(--columns, 4)
+      )
+    );
+    --image-height: var(--image-diameter, 120px);
     position: relative;
     min-width: 300px;
-    width: calc(
-      var(--image-diameter, 120px) * var(--columns, 4) + var(--gap, 1rem) *
-        (var(--columns, 4) - 1)
-    );
+    width: 100%;
     height: min-content;
     padding: var(--wrap-padding, 1rem);
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -108,8 +114,8 @@
 
       > div.image {
         position: relative;
-        width: var(--image-diameter, 120px);
-        height: var(--image-diameter, 120px);
+        width: var(--image-width, 120px);
+        height: var(--image-height, 120px);
         cursor: grab;
         overflow: hidden;
         border-radius: 0.75rem;
@@ -262,4 +268,8 @@
     background: unset;
     border: unset;
   }
+
+  section#wrap {
+    width: 60vw;
+  }
 }