Refine muuri pinboard layout, spacing and remove randomization

public/assets/pinboard.css

@@ -2,12 +2,14 @@
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
-  padding: 1.5rem;
+  padding: 2em;
+  box-sizing: border-box;
 }
 
 .pinboard__surface {
   position: relative;
   min-height: 42rem;
+  padding: 1.2rem;
   border-radius: 1.2rem;
   overflow: hidden;
   background:
@@ -20,20 +22,29 @@
 
 .pin-note {
   position: absolute;
-  width: clamp(220px, 28vw, 340px);
+  width: clamp(220px, 26vw, 320px);
+  min-height: 230px;
+  padding: 1.5em;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.pin-note__inner {
+  position: relative;
   min-height: 190px;
   padding: 1rem 1rem 1.25rem;
   border-radius: 0.3rem;
   background: linear-gradient(160deg, #fff8a8 0%, #f5eb85 100%);
   color: #2a241c;
   box-shadow: 0 10px 22px rgba(20, 10, 5, 0.34);
-  cursor: grab;
+  cursor: pointer;
   user-select: none;
-  touch-action: none;
-  transition: box-shadow 160ms ease, transform 160ms ease;
+  touch-action: auto;
+  transform: translate(0, 0) rotate(0deg);
+  transition: box-shadow 160ms ease;
 }
 
-.pin-note::before {
+.pin-note__inner::before {
   content: '';
   position: absolute;
   top: -9px;
@@ -46,12 +57,11 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
 }
 
-.pin-note.is-highlighted {
+.pin-note.is-highlighted .pin-note__inner {
   background: linear-gradient(160deg, #ffd99b 0%, #f7c46f 100%);
 }
 
-.pin-note.is-dragging {
-  cursor: grabbing;
+.pin-note.is-front .pin-note__inner {
   box-shadow: 0 18px 34px rgba(20, 10, 5, 0.46);
 }
 
@@ -97,7 +107,7 @@
 
 @media (max-width: 768px) {
   .pinboard {
-    padding: 0.8rem;
+    padding: 2em;
   }
 
   .pinboard__surface {