1/*Magic card*/
2.card {
3 width: 190px;
4 height: 254px;
5 background: #f5f5f5;
6 overflow: visible;
7 box-shadow: 0 5px 20px 2px rgba(0,0,0,0.1);
8 display: flex;
9 flex-direction: column;
10 align-items: center;
11}
12
13.card-info {
14 display: flex;
15 flex-direction: column;
16 align-items: center;
17 gap: 2em;
18 padding: 0 1rem;
19}
20
21.card-img {
22 --size: 100px;
23 width: var(--size);
24 height: var(--size);
25 border-radius: 50%;
26 transform: translateY(-50%);
27 background: #42caff;
28 background: linear-gradient(to bottom, #42caff 0%, #e81aff 100%);
29 position: relative;
30 transition: all .3s ease-in-out;
31}
32
33.card-img::before {
34 content: "";
35 border-radius: inherit;
36 position: absolute;
37 top: 50%;
38 left: 50%;
39 width: 90%;
40 height: 90%;
41 transform: translate(-50%, -50%);
42 border: 1rem solid #e8e8e8;
43}
44
45/*Text*/
46.text-title {
47 text-transform: uppercase;
48 font-size: 0.75em;
49 color: #42caff;
50 letter-spacing: 0.05rem;
51}
52
53.text-body {
54 font-size: .8em;
55 text-align: center;
56 color: #6f6d78;
57 font-weight: 400;
58 font-style: italic;
59}
60
61/*Hover*/
62.card:hover .card-img {
63 --size: 110px;
64 width: var(--size);
65 height: var(--size);
66}