collage fixes

public/styles.css

@@ -215,6 +215,8 @@ code {
   display: grid;
   justify-items: center;
   padding: var(--collage-spacing);
+  contain: layout paint;
+  pointer-events: none;
   -webkit-mask-image: linear-gradient(
     to bottom,
     transparent 0,
@@ -232,19 +234,23 @@ code {
 }
 
 .collage-track {
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  align-items: stretch;
-  gap: var(--collage-spacing);
-  animation: collage-scroll var(--collage-duration) linear infinite;
-  will-change: transform;
-}
-
-.collage-group {
   display: grid;
   grid-template-columns: repeat(var(--collage-columns), minmax(0, var(--collage-card-width)));
   gap: var(--collage-spacing);
+  width: max-content;
+  backface-visibility: hidden;
+  contain: layout style;
+}
+
+.collage-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--collage-spacing);
+  width: var(--collage-card-width);
+  backface-visibility: hidden;
+  contain: layout style;
+  transform: translate3d(0, 0, 0);
+  will-change: transform;
 }
 
 .collage-card {
@@ -252,10 +258,16 @@ code {
   width: 100%;
   height: auto;
   max-width: var(--collage-card-width);
-  overflow: hidden;
+  max-height: none;
+  contain: layout style;
+  overflow: visible;
   transform: none;
 }
 
+.collage-card:not(.is-hydrated) {
+  min-height: 160px;
+}
+
 .collage-card > iframe,
 .collage-card > blockquote,
 .collage-card > img,
@@ -274,16 +286,11 @@ code {
   width: 100% !important;
   max-width: 100% !important;
   box-sizing: border-box;
+  margin: 0 !important;
 }
 
-@keyframes collage-scroll {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(calc(-50% - (var(--collage-spacing) / 2)));
-  }
+.collage-card > * {
+  margin-block: 0 !important;
 }
 
 .error {