/* Scoped to .collage so it won't clash with your site CSS. No Tailwind needed. */
  .collage {
    --ratio: 5 / 3;          /* container shape (width / height). Try 4 / 3 or 1 / 1 for taller */
    --radius: 8px;          /* default corner radius for all images */
    --shadow: 0 8px 24px rgba(0,0,0,.14);
 
    position: relative;
    width: 100%;             /* fills its parent container */
    aspect-ratio: var(--ratio);
    margin: 5rem 0;
    overflow: hidden;
  }
 
  /* Every tile is positioned & sized in % of the container, so the whole collage scales as one piece.
     Per-tile controls:  --x (left %)   --y (top %)   --w (width %)   --ar (shape)   --r (radius)  */
  .collage .tile {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    aspect-ratio: var(--ar, 1 / 1);
    border-radius: var(--r, var(--radius));
    overflow: hidden;
    box-shadow: var(--shadow);
    z-index: 2;
    animation: collage-float 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
  }
  .collage .tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* crops to fit; use object-position: x% y% on the img to re-aim the crop */
  }
 
  /* ---- Edit these: one line per image ---- */
  .collage .t-center { --x: 29%; --y: 17%; --w: 42%; --ar: 4 / 4; --r: 20px; z-index: 3; }
  .collage .t-1      { --x: 10%; --y: 0%;  --w: 22%; }
  .collage .t-2      { --x: 68%; --y: 4%;  --w: 11%; --d: -2s; }
  .collage .t-3      { --x: 75%; --y: 34%; --w: 20%; --d: -4s; }
  .collage .t-4      { --x: 16%; --y: 76%; --w: 11%; --d: -3s; }
  .collage .t-5      { --x: 5%;  --y: 53%; --w: 15%; --d: -1s; }
  .collage .t-6      { --x: 72%; --y: 75%; --w: 14%; --ar: 8 / 7; --d: -5s; }
 
  /* Optional: a different layout on small screens (override any tile's values here) */
  @media (max-width: 640px) {
    .collage { --ratio: 1 / 1; --radius: 12px; overflow: visible; }
    .collage .t-center { --x: 17%; --y: 28%; --w: 66%; }
    .collage .t-1 { --x: 4%;  --y: 2%;  --w: 38%; }
    .collage .t-2 { --x: 63%; --y: 10%;  --w: 22%; }
    .collage .t-3 { --x: 76%; --y: 21%; --w: 24%; }
    .collage .t-4 { --x: 4%;  --y: 82%; --w: 28%; }
    .collage .t-5 { --x: 79%; --y: 85%; --w: 18%; }
    .collage .t-6 { --x: 4%;  --y: 36%; --w: 0%; display: none; } /* hide a tile on mobile */

  .mobile-collage {
    height: 460px !important; /* Change to whatever height you need */
  }
  

}