.popup{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 999;
  display: none;
  justify-content: center;
  align-items: center;
  transition: all 700ms ease;
}
.popup-active{
  display: none;
}

.popup picture{display: flex; justify-content: center;}
.popup img{width: 100%;}
.popup-img{z-index: 3; width: 75%; background-color: #E54B4B; cursor: pointer;}
.popup-img a:hover > picture {opacity: 0.7;}
.popup-back{ width: 100%; height: 100%;position: absolute; top: 0;}
.popup-bg{background-color: black; width: 100%; height: 100%; opacity: 0.7; position: absolute; top: 0;}
.popup-cross{
  z-index: 3;
  width: 60px;
  height: 60px;
  position: absolute;
  right: 30px;
  top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.popup-cross:before{
  content:"";
  width: 100%;
  height: 1.2px;
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
}
.popup-cross:after{
  content:"";
  width: 100%;
  height: 1.2px;
  background-color: white;
  transform: rotate(-45deg);
  position: absolute;
}
.popup-cross:hover:after{background-color: #E54B4B;}
.popup-cross:hover:before{background-color: #E54B4B;}


@media screen and (max-width: 920px) {
  .popup img{width: auto; height: 100%;}
  .popup-img{height: 90%; width: auto;}
  .popup picture{height: 100%;}
}

@media screen and (max-width: 600px) {
  .popup-img{height: 75%; width: auto;}
}