.container .card{position:relative;width:100%;height:350px;background:#2b673b;border-radius:20px;overflow:hidden}.container .card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(27 60 13);clip-path:circle(25px at 89% 9%);transition:.5s ease-in-out}.container .card:hover::before{clip-path:circle(480px at 80% -20%)}.container .card .image-box{position:absolute;top:40%;transform:translateY(-50%);z-index:1;width:100%;height:220px;transition:.5s}.container .card:hover .image-box{top:0;transform:translateY(0)}.container .card .image-box img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:270px}.container .card .content-box{position:absolute;bottom:0;width:100%;height:100px;text-align:center;transition:1s;z-index:10}.container .card:hover .content-box{height:150px}.container .card .content-box h2{position:relative;font-weight:600;letter-spacing:1px;color:#fff;text-transform:uppercase}.container .card .content-box .color,.container .card .content-box .size{display:flex;justify-content:center;align-items:center;padding:8px 20px;transition:.5s;opacity:0;visibility:hidden}.container .card:hover .content-box .size{opacity:1;visibility:visible;transition-delay:0.5s}.container .card:hover .content-box .color{opacity:1;visibility:visible;transition-delay:0.6s}.container .card .content-box .color h3,.container .card .content-box .size h3{color:#fff;font-weight:300;font-size:14px;text-transform:uppercase;letter-spacing:2px;margin-right:10px}.container .card .content-box .size span{width:26px;height:26px;text-align:center;line-height:26px;font-size:14px;display:inline-block;color:#111;background:#fff;margin:0 5px;transition:.5s;cursor:pointer}.container .card .content-box .color span:nth-child(2),.container .card .content-box .size span:hover{background:#9bdc28}.container .card .content-box .color span{width:20px;height:20px;background:#ff0;border-radius:50%;margin:0 5px;cursor:pointer}.container .card .content-box .color span:nth-child(3){background:#03a9f4}.container .card .content-box .color span:nth-child(4){background:#e91e63}.container .card .content-box a{display:inline-block;padding:10px 20px;background:#fff;border-radius:4px;margin-top:10px;text-decoration:none;font-weight:600;color:#111;opacity:0;transform:translateY(50px);transition:.5s}.container .card:hover .content-box a{opacity:1;transform:translateY(0);transition-delay:0.75s}