.popupfp {
    width: var(--popupfp-width, auto);
    height: var(--popupfp-height, auto);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    padding: 1.5rem;
    overflow: auto;
    color: inherit;
    background: var(--popupfp-background, #fff);
    border: 0;
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 35%);
    animation-duration: var(--popupfp-animation-time, 1000ms);
    animation-fill-mode: both;
}

.popupfp::backdrop { background: rgb(0 0 0 / 55%); }

.popupfp__close {
    position: absolute;
    top: .25rem;
    right: .5rem;
    padding: 0 .25rem;
    color: inherit;
    background: transparent;
    border: 0;
    font: 2rem/1 sans-serif;
    cursor: pointer;
}

.popupfp__content img { max-width: 100%; height: auto; }
.popupfp--false { animation: none; }
.popupfp--fade { animation-name: popupfp-fade; }
.popupfp--slide { animation-name: popupfp-slide; }
.popupfp--circular { animation-name: popupfp-circular; }
.popupfp--tube { animation-name: popupfp-tube; }
.popupfp--zoom-in-out { animation-name: popupfp-zoom; }
.popupfp--rotate { animation-name: popupfp-rotate; }

@keyframes popupfp-fade { from { opacity: 0; } }
@keyframes popupfp-slide { from { opacity: 0; transform: translateY(-4rem); } }
@keyframes popupfp-circular { from { opacity: 0; clip-path: circle(0 at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes popupfp-tube { from { opacity: 0; transform: scaleX(.05); } }
@keyframes popupfp-zoom { from { opacity: 0; transform: scale(.4); } }
@keyframes popupfp-rotate { from { opacity: 0; transform: rotate(-12deg) scale(.7); } }

@media (prefers-reduced-motion: reduce) {
    .popupfp { animation: none; }
}