/* The collage version of the social section: a masonry wall of five small
   columns, cut off under one chosen post with a fade. Used by
   index-collage.html; index.html has the drifting strip instead. */

.collage {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
  margin-top: 64px; align-items: start;
  /* X's cards will not go under 250px wide, so the wall is drawn at 72%:
     five smaller cards across. The width is set in the scaled space, so on
     screen it still spans the 1320px wrap. */
  zoom: 0.72;
  width: min(100% - 61px, 1639px);
  max-height: 1100px; overflow: hidden; position: relative;
}
.collage > * { min-width: 0; }
.collage .twitter-tweet { margin: 0 !important; max-width: 100% !important; }
.collage__gap { height: 460px; }
.collage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fade, 160px); pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 244, 239, 0) 0%, var(--tint) 100%);
}
@media (max-width: 620px) {
  .collage { grid-template-columns: minmax(0, 1fr); justify-items: center; zoom: 1; width: min(100% - 44px, 1320px); max-height: 1500px; }
}

/* The whole-wall version (index-collage-full.html): five plain columns,
   each a stack of posts in written order. No masonry, no cut, no fade. */
.collage-cols {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
  align-items: start; margin-top: 64px;
  zoom: 0.72;
  width: min(100% - 61px, 1639px);
}
.collage__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.collage-cols .twitter-tweet { margin: 0 !important; max-width: 100% !important; }
@media (max-width: 620px) {
  .collage-cols { grid-template-columns: minmax(0, 1fr); zoom: 1; width: min(100% - 44px, 1320px); }
}