.hoto.card{width:300px;height:420px;position:relative;perspective:1000px;cursor:pointer}.hoto .card__inner{width:100%;height:100%;position:absolute;transform-style:preserve-3d;transition:transform .1s}.hoto .card__front{width:100%;height:100%;position:absolute;backface-visibility:hidden;border-radius:10px;overflow:hidden;box-shadow:0 10px 20px #0000004d;background-size:cover}.hoto .reflection{position:absolute;top:var(--reflection-top, 0);left:var(--reflection-left, 0);width:var(--reflection-width, 90%);height:var(--reflection-height, 40%);pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,1) 10%,rgba(255,255,255,.9) 20%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.6) 50%,transparent 80%),linear-gradient(to bottom,rgba(255,255,255,.2) 10%,transparent 40%,rgba(255,255,255,.1) 70%,transparent 90%);mix-blend-mode:overlay;opacity:0;transition:opacity .05s,transform .05s;filter:blur(4px)}.hoto .shadow{position:absolute;margin-left:20px;top:0;left:0;width:90%;height:40%;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,.05) 10%,rgba(0,0,0,.02) 30%,transparent 60%);mix-blend-mode:multiply;opacity:0;transition:opacity .05s,transform .05s;filter:blur(2px)}@media (max-width: 582px){.hoto.card{width:300px;height:286px}}