/* PixaFlipBox 1.2 — auto front-image sizing or explicit aspect ratio. */
.pix-flip-box {
    width: 100%;
    perspective: 1000px;
    position: relative;
    border-radius: var(--pix-radius, 8px);
    outline-offset: 3px;
}
.pix-flip-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform var(--pix-speed, .7s) ease-in-out;
}
.pix-flip-box:hover .pix-flip-inner,
.pix-flip-box:focus-visible .pix-flip-inner {
    transform: var(--pix-rotation, rotateY(180deg));
}
.pix-flip-front,
.pix-flip-back {
    overflow: hidden;
    border-radius: var(--pix-radius, 8px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.pix-flip-back {
    position: absolute;
    inset: 0;
    transform: var(--pix-rotation, rotateY(180deg));
}
.pix-flip-front img,
.pix-flip-back img {
    display: block;
    width: 100%;
}
/* Default: natural front-image proportions determine box height. */
.pix-flip-auto .pix-flip-front { position: relative; }
.pix-flip-auto .pix-flip-front img { height: auto; }
.pix-flip-auto .pix-flip-back img { height: 100%; object-fit: cover; }
/* Optional: shortcode ratio sets a fixed responsive frame. */
.pix-flip-fixed { aspect-ratio: var(--pix-ratio, 1/1); }
.pix-flip-fixed .pix-flip-inner { height: 100%; }
.pix-flip-fixed .pix-flip-front { position: absolute; inset: 0; }
.pix-flip-fixed .pix-flip-front img,
.pix-flip-fixed .pix-flip-back img { height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
    .pix-flip-inner { transition-duration: .01ms; }
}