.card{position:relative;height:300px;width:230px}.card:nth-child(2){filter:hue-rotate(300deg) brightness(1.3)}.card:nth-child(3){filter:hue-rotate(200deg) brightness(1.5)}.card:nth-child(4){filter:hue-rotate(60deg) brightness(3)}.card .boxshadow{position:absolute;height:100%;width:100%;border:1px solid red;transform:scale(.8);box-shadow:0 30px 70px 0 red;transition:all .5s cubic-bezier(.785,.135,.15,.86)}.card .main{width:230px;height:300px;overflow:hidden;position:relative;-webkit-clip-path:polygon(0 0,100% 0,100% 40px,100% calc(100% - 40px),calc(100% - 40px) 100%,40px 100%,0 calc(100% - 40px));clip-path:polygon(0 0,100% 0,100% 40px,100% calc(100% - 40px),calc(100% - 40px) 100%,40px 100%,0 calc(100% - 40px));transition:all .3s cubic-bezier(.785,.135,.15,.86)}.card .main .title{top:90px;font-weight:700;font-size:25px;opacity:0;z-index:-1;transition:all .2s ease-out 0s}.card .main .button-container,.card .main .title{position:absolute;left:50%;transform:translateX(-50%)}.card .main .button-container{bottom:10px;bottom:15%;z-index:10;display:flex;justify-content:center;align-items:center}.card .main .button-container .button{transform:translateX(-50%);-webkit-clip-path:polygon(0 0,100% 0,81% 100%,21% 100%);clip-path:polygon(0 0,100% 0,81% 100%,21% 100%);background:#000;padding:15px;border:none;color:#fff;transition:all .5s cubic-bezier(.785,.135,.15,.86)}.card .main .button-container .button .svg{width:15px}.card:hover .main{transform:scale(1.1)}.card:hover .main .title{opacity:1;transition:all .2s ease-out 1.3s}.card:hover .main .button-container .button:first-child{bottom:0;left:2px;transition-delay:.8s}.card:hover .main .button-container .button:nth-child(2){bottom:0;transition-delay:.4s}