.card {
    --rx: 0deg;
    --ry: 0deg;
    --spin: 0deg;
    --mx: 50%;
    --my: 50%;
    --pointer-from-left: 0.5;
    --pointer-from-top: 0.5;
    --pointer-from-center: 0;
    --card-opacity: 0;

    position: relative;
    width: 100%;
    height: 100%;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    border-radius: 5% / 3.59%;
    box-shadow: 0 18px 40px rgb(0 0 0 / 45%);

    transform: rotateY(calc(var(--ry) + var(--spin))) rotateX(var(--rx));
}

.card * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

.card-front {
    /* Il ritaglio e i blend appartengono solo alla faccia frontale. */
    overflow: hidden;
    isolation: isolate;
    background: #27304a;
    /*transform: translateZ(0.1px);*/

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg) /*translateZ(0.1px)*/;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card img {
    display: block;
    object-fit: cover;
}