Tune pinboard styling and Muuri-driven dynamic item widths

public/assets/pinboard.css

@@ -6,23 +6,27 @@
   box-sizing: border-box;
 }
 
+.pinboard {
+  --pin-gap: 1.25rem;
+}
+
 .pinboard__surface {
   position: relative;
   min-height: 42rem;
   padding: 1.2rem;
+  border: 30px solid #cba888;
   border-radius: 1.2rem;
   overflow: hidden;
   background:
-    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.25), transparent 42%),
-    radial-gradient(circle at 80% 90%, rgba(50, 30, 10, 0.2), transparent 36%),
-    repeating-linear-gradient(35deg, rgba(75, 40, 15, 0.18), rgba(75, 40, 15, 0.18) 3px, rgba(93, 52, 23, 0.12) 3px, rgba(93, 52, 23, 0.12) 9px),
-    linear-gradient(145deg, #b77944 0%, #a66a38 45%, #8d552a 100%);
+    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 42%),
+    radial-gradient(circle at 80% 90%, rgba(40, 22, 10, 0.16), transparent 36%),
+    url('/bundles/contaopinboard/assets/wood_0011_color_1k.jpg') center/cover no-repeat;
   box-shadow: inset 0 0 0 1px rgba(65, 33, 12, 0.25), inset 0 0 18px rgba(45, 22, 8, 0.35);
 }
 
 .pin-note {
   position: absolute;
-  width: clamp(220px, 26vw, 320px);
+  width: 320px;
   min-height: 230px;
   padding: 1.5em;
   box-sizing: border-box;
@@ -113,8 +117,4 @@
   .pinboard__surface {
     min-height: 36rem;
   }
-
-  .pin-note {
-    width: min(84vw, 290px);
-  }
 }

public/assets/pinboard.js

@@ -44,6 +44,25 @@
     layoutEasing: 'ease',
   });
 
+  const toPx = (value) => {
+    const parsed = Number.parseFloat(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  };
+
+  const updateItemWidths = () => {
+    const boardStyles = window.getComputedStyle(board);
+    const boardWidth = board.clientWidth;
+    const gap = toPx(boardStyles.getPropertyValue('--pin-gap')) || 20;
+    const minItemWidth = 260;
+
+    const columns = Math.max(1, Math.floor((boardWidth + gap) / (minItemWidth + gap)));
+    const itemWidth = Math.max(220, Math.floor((boardWidth - (columns - 1) * gap) / columns));
+
+    ordered.forEach((note) => {
+      note.style.width = `${itemWidth}px`;
+    });
+  };
+
   const bringToFront = (note) => {
     zCounter += 1;
     note.style.zIndex = String(zCounter);
@@ -59,6 +78,7 @@
   });
 
   const relayout = () => {
+    updateItemWidths();
     grid.refreshItems().layout();
   };