#pop {
  --pop-close-btn-size: 3rem;
  --pop-close-btn-fs: 3rem;
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 999999999;
}

#pop:has(:checked) {
  animation: pop-fadeout .3s forwards;
}

#pop>* {
  grid-area: 1 / 1;
}

#pop .pop__backdrop {
  background: #00000050;
  cursor: pointer;
}

#pop .pop__content {
  margin: auto;
}

#pop .pop__close {
  display: block;
  margin-left: auto;
  margin-bottom: 0;
  width: var(--pop-close-btn-size);
  aspect-ratio: 1;
  align-content: center;
  text-align: center;
  font-size: var(--pop-close-btn-fs);
  line-height: .5;
  color: #fff;
  cursor: pointer;
  transition: .3s;
  transform: translateX(calc(50% - var(--pop-close-btn-fs) / 4));
}

#pop .pop__close:hover {
  color: #ff5b52;
}

#pop #pop__close {
  display: none;
}

#pop .pop__img {
  max-width: min(48rem, 90vw);
  max-height: min(48rem, calc(90vh - var(--pop-close-btn-size)));
}

@keyframes pop-fadeout {
  99% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    display: none;
  }
}