.zoom {
  transition: transform 1s ease;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.fade-in {
  opacity: 0;
  transition: opacity 3s ease-in;
}

.fade-in.visible {
  opacity: 1;
}

.fade-in-left {
  animation: fadeInLeft 3s forwards ease;
}

.fade-in-right {
  animation: fadeInRight 3s forwards ease;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

}