1.card {
2  height: 254px;
3  width: 190px;
4  position: relative;
5  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
6  border-radius: 16px;
7  box-shadow: 0 0 20px 8px #d0d0d0;
8  overflow: hidden;
9}
10
11 /*Image*/
12.card-image {
13  height: 100%;
14  width: 100%;
15  position: absolute;
16  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
17  background: #0a3394;
18  background: linear-gradient(to top, #0a3394, #4286f4);
19}
20
21/*Description */
22.card-description {
23  display: flex;
24  position: absolute;
25  gap: .5em;
26  flex-direction: column;
27  background-color: #f5f5f5;
28  color: #212121;
29  height: 70%;
30  bottom: 0;
31  border-radius: 16px;
32  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
33  padding: 1rem;
34}
35
36/*Text*/
37.text-title {
38  font-size: 1.3rem;
39  font-weight: 700;
40}
41
42.text-body {
43  font-size: 1rem;
44  line-height: 130%;
45}
46
47
48/* Hover states */
49.card:hover .card-description {
50  transform: translateY(100%);
51}
52
53