*{margin:0;padding:0}body{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:#161616;min-height:100vh}section:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(#da22ff,#9733ee);clip-path:circle(30% at right 70%)}section:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(#e55d87,#5fc3e4);clip-path:circle(20% at 10% 10%)}.container{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin:40px 0}.container .card{position:relative;width:300px;height:400px;background:#ffffff0d;margin:20px;box-shadow:0 15px 35px #00000080;border-radius:15px;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.container .card .content{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:.5s}.container .card:hover .content{transform:translateY(-20px)}.container .card .content .imgBx{position:relative;width:150px;height:150px;overflow:hidden;border-radius:10px}.container .card .content .imgBx img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.container .card .content .contentBx h3{color:#fff;text-transform:uppercase;letter-spacing:2px;font-weight:500;font-size:18px;text-align:center;margin:20px 0 10px;line-height:1.1em}.container .card .content .contentBx h3 span{font-size:12px;font-weight:300;text-transform:initial}.container .card .sci{position:absolute;bottom:50px;display:flex}.container .card .sci li{list-style:none;margin:0 10px;transform:translateY(40px);transition:.5s;opacity:0}.container .card:hover .sci li{transform:translateY(0);opacity:1}.container .card .sci li a{color:#fff;font-size:20px}