body{font-family:Arial,Helvetica,sans-serif}.card{aspect-ratio:1/1;background-color:transparent;perspective:1000px;width:100%}.card-inner{box-shadow:0 4px 8px 0 rgba(0,0,0,.2);height:100%;position:relative;text-align:center;transform-style:preserve-3d;transition:transform .6s;width:100%}.card:hover .card-inner,.flipped .card-inner{transform:rotateY(180deg)}.flipped:hover .card-inner{transform:rotateY(0deg)}.card-back,.card-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}.card-front img{height:100%;object-fit:cover;width:100%}.card-back{align-items:center;background-color:#fff;display:flex;flex-flow:column;justify-content:center;padding:1rem;transform:rotateY(180deg)}