1.card {
2  width: 190px;
3  height: 120px;
4  transition: all .5s;
5  box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.11),
6             -15px -15px 30px rgba(60, 60, 60, 0.082);
7  text-align: center;
8  overflow: hidden;
9}
10
11.card:hover {
12  height: 260px;
13  background: linear-gradient(360deg, #edededc5 60%, hsla(0, 0%, 13%, 1) 70%);
14}
15
16.card .header {
17  padding: 20px;
18  display: flex;
19  flex-direction: column;
20  align-items: center;
21  justify-content: center;
22  background: #212121;
23  margin-bottom: 16px;
24}
25
26.card .header .img-box {
27  width: 50px;
28}
29
30.card .header .title {
31  font-size: 1em;
32  letter-spacing: .1em;
33  font-weight: 900;
34  text-transform: uppercase;
35  padding: 4px 0 14px 0;
36  transition: all .5s;
37  color: #edededc5;
38}
39
40.card:hover .header {
41  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
42}
43
44.card:hover .card .header .title {
45  padding: 0;
46}
47
48.card .content {
49  display: block;
50  text-align: left;
51  color: #212121;
52  margin: 0 18px;
53}
54
55.card .content p {
56  transition: all .5s;
57  font-size: .8em;
58  margin-bottom: 8px;
59}
60
61.card .content a {
62  color: #1d8122;
63  cursor: pointer;
64  transition: all .5s;
65  font-size: .7rem;
66  font-weight: 700;
67  text-transform: uppercase;
68}
69
70.card .content .btn-link:hover {
71  border-bottom: 1px solid #1d8122;
72}