.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container .image-item {
  align-self: center;

}

img {
  margin: 5px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.bounce {
  animation: bounce 1000ms;
  animation-timing-function: linear;
}

@keyframes bounce {
  25% {
    transform: scale(calc(var(--s,1) + 0.2));
  }
  50% {
    transform: scale(calc(var(--s,1) - 0.1));
  }
  75% {
    transform: scale(calc(var(--s,1) + 0.1));
  }
  100% {
    transform: scale(var(--s,1));
  }
}

@keyframes zebra-animation {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(-5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-10px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Apply the animation to the zebra element */
.zebra {
  animation: zebra-animation 2s linear infinite;
}

@keyframes ape-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Apply the animation to the ape element */
.ape {
  animation: ape-animation 3s ease-in-out infinite;
}

.tiger {
animation: tiger-animation 1s ease-in-out forwards;
}

@keyframes tiger-animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2) rotate(10deg);
}
100% {
transform: scale(1);
}
}