.card-container{display:flex;justify-content:center;margin:0 auto;padding:40px 60px}.card{display:flex;flex:1;height:100%;margin:0 20px;max-height:700px;max-width:476px;text-align:center;transform-style:preserve-3d;transition:all 1s ease;transition:z-index,transform .5s;width:auto;z-index:0;&:hover{transition-delay:0s;z-index:1}}.card:focus,.card:hover{transform:rotateY(180deg)}.back,.front{align-items:center;backface-visibility:hidden;min-width:100%}.back{transform:rotateY(180deg) translate(100%)}.back>img,.front>img{border-radius:10px;box-shadow:0 25px 20px -20px rgba(0,0,0,.2);height:100%}