.lightbox {
  opacity: 0;
  pointer-events: none;

  position: fixed;
  z-index: 9999;

  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.95) 70%);

  display: flex;
  justify-content: center;
  align-items: center;

  transition: opacity 1.4s ease-in-out;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-image {
  max-width: 85vw;
  max-height: 85vh;

  border: 0.4vw solid white;
  border-radius: 3vw;

  box-shadow: 0 0 3vw white;
  background-color: black;
}

.lightbox.active .lightbox-image {
  transform: scale(1);
  opacity: 1;
}