.p-overlay {
  display: none;
  background-color: rgba(0,0,0,0.5);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
}

.p-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 100001;
  width: 60%;
}

.p-popup img {
  max-width: 100%;
}

@media (min-width: 376px) {
  .p-popup {
    width: auto;
  }

  .p-popup img {
    max-width: initial;
    max-height: 400px;
  }
}

.p-overlay.active,
.p-popup.active {
  display: block;
}

.p-close {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #000;
  color: #fff;
  border: 2px solid #000;
  line-height: 12px;
  padding: 0;
  cursor: pointer;
}