.mfp-bg {
  background: var(--color-purpleblack);
  opacity: 0.9;
}

.mfp-zoom-in .mfp-content {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.mfp-zoom-in.mfp-ready .mfp-content {
  transform: scale(1);
  opacity: 1;
}

.mfp-zoom-in.mfp-removing .mfp-content {
  transform: scale(0.8);
  opacity: 0;
}

.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.9;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

.mfp-zoom-in .mfp-arrow {
  opacity: 0;
}

.mfp-zoom-in.mfp-ready .mfp-arrow {
  opacity: 1;
}

.mfp-zoom-in.mfp-removing .mfp-arrow {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.mfp-zoom-in > .mfp-close {
  opacity: 0 !important;
  transition: opacity 0.2s ease-in-out;
}

.mfp-zoom-in.mfp-ready > .mfp-close {
  opacity: 1 !important;
}

.mfp-zoom-in.mfp-removing > .mfp-close {
  opacity: 0 !important;
}