.gif-collage {
  position: relative;
  /* make it a square that shrinks/grows between 200px and 400px */
  width:  clamp(300px, 46vw, 600px);
  height: clamp(50px, 30vw, 300px);
  overflow: hidden;               /* hide anything outside the square */
  margin: 2rem auto;              /* center or place as you like */
  background: transparent;               /* optional background */
}

.gif-collage .collage-item {
  position: absolute;             /* allows overlapping */
  max-width: clamp(60px, 15%, 100px);
  width: auto;                    /* keeps original ratio */
  height: auto;
  object-fit: contain;            /* no stretching */
  transition: transform .2s ease; /* optional hover pop */
}

/* COMMMENTED OUT TO DO THE RANDOMIZER
.collage-item:nth-child(1) {
  top: 5%; left: 10%;
  transform: rotate(-8deg);
  z-index: 20;
}
.collage-item:nth-child(2) {
  top: 18%; left: 30%;
  transform: rotate(12deg);
  z-index: 19;
}
.collage-item:nth-child(3) {
  top: 40%; left: 15%;
  transform: rotate(-15deg);
  z-index: 18;
}
.collage-item:nth-child(4) {
  top: 28%; left: 65%;
  transform: rotate(5deg);
  z-index: 17;
}
.collage-item:nth-child(5) {
  top: 70%; left: 35%;
  transform: rotate(-4deg);
  z-index: 16;
}
.collage-item:nth-child(6) {
  top: 50%; left: 55%;
  transform: rotate(10deg);
  z-index: 15;
}
.collage-item:nth-child(7) {
  top: 10%; left: 50%;
  transform: rotate(-6deg);
  z-index: 14;
}
.collage-item:nth-child(8) {
  top: 60%; left: 10%;
  transform: rotate(14deg);
  z-index: 13;
}
.collage-item:nth-child(9) {
  top: 35%; left: 45%;
  transform: rotate(-11deg);
  z-index: 12;
}
.collage-item:nth-child(10) {
  top: 25%; left: 70%;
  transform: rotate(7deg);
  z-index: 11;
}
.collage-item:nth-child(11) {
  top: 78%; left: 60%;
  transform: rotate(-3deg);
  z-index: 10;
}
.collage-item:nth-child(12) {
  top: 5%; left: 70%;
  transform: rotate(16deg);
  z-index: 9;
}
.collage-item:nth-child(13) {
  top: 45%; left: 25%;
  transform: rotate(-9deg);
  z-index: 8;
}
.collage-item:nth-child(14) {
  top: 15%; left: 70%;
  transform: rotate(4deg);
  z-index: 7;
}
.collage-item:nth-child(15) {
  top: 58%; left: 40%;
  transform: rotate(-13deg);
  z-index: 6;
}
.collage-item:nth-child(16) {
  top: 72%; left: 20%;
  transform: rotate(9deg);
  z-index: 5;
}
.collage-item:nth-child(17) {
  top: 33%; left: 5%;
  transform: rotate(-6deg);
  z-index: 4;
}
.collage-item:nth-child(18) {
  top: 12%; left: 60%;
  transform: rotate(11deg);
  z-index: 3;
}
.collage-item:nth-child(19) {
  top: 65%; left: 65%;
  transform: rotate(-10deg);
  z-index: 2;
}
.collage-item:nth-child(20) {
  top: 80%; left: 5%;
  transform: rotate(7deg);
  z-index: 1;
}

.collage-item:nth-child(21) {
  top: 8%; left: 25%;
  transform: rotate(6deg);
  z-index: 20;
}
.collage-item:nth-child(22) {
  top: 22%; left: 55%;
  transform: rotate(-12deg);
  z-index: 19;
}
.collage-item:nth-child(23) {
  top: 38%; left: 60%;
  transform: rotate(9deg);
  z-index: 18;
}
.collage-item:nth-child(24) {
  top: 60%; left: 50%;
  transform: rotate(-5deg);
  z-index: 17;
}
.collage-item:nth-child(25) {
  top: 75%; left: 30%;
  transform: rotate(11deg);
  z-index: 16;
}
.collage-item:nth-child(26) {
  top: 15%; left: 5%;
  transform: rotate(-7deg);
  z-index: 15;
}
.collage-item:nth-child(27) {
  top: 45%; left: 85%;
  transform: rotate(13deg);
  z-index: 14;
}
.collage-item:nth-child(28) {
  top: 68%; left: 10%;
  transform: rotate(-10deg);
  z-index: 13;
}
.collage-item:nth-child(29) {
  top: 30%; left: 40%;
  transform: rotate(4deg);
  z-index: 12;
}
.collage-item:nth-child(30) {
  top: 5%; left: 80%;
  transform: rotate(-6deg);
  z-index: 11;
}
.collage-item:nth-child(31) {
  top: 80%; left: 60%;
  transform: rotate(8deg);
  z-index: 10;
}
.collage-item:nth-child(32) {
  top: 50%; left: 5%;
  transform: rotate(-14deg);
  z-index: 9;
}
.collage-item:nth-child(33) {
  top: 20%; left: 75%;
  transform: rotate(7deg);
  z-index: 8;
}
.collage-item:nth-child(34) {
  top: 65%; left: 45%;
  transform: rotate(-9deg);
  z-index: 7;
}
.collage-item:nth-child(35) {
  top: 35%; left: 10%;
  transform: rotate(10deg);
  z-index: 6;
}
.collage-item:nth-child(36) {
  top: 10%; left: 35%;
  transform: rotate(-3deg);
  z-index: 5;
}
.collage-item:nth-child(37) {
  top: 55%; left: 76%;
  transform: rotate(12deg);
  z-index: 4;
}
.collage-item:nth-child(38) {
  top: 25%; left: 20%;
  transform: rotate(-11deg);
  z-index: 3;
}
.collage-item:nth-child(39) {
  top: 78%; left: 75%;
  transform: rotate(5deg);
  z-index: 2;
}
.collage-item:nth-child(40) {
  top: 42%; left: 60%;
  transform: rotate(-8deg);
  z-index: 1;
}

*/

.gif-collage .collage-item:hover {
  transform: scale(1.1) rotate(0deg);
  z-index: 10;  /* bring hovered GIF to front */
}