1.card {
2 --primary-clr: #1C204B;
3 --dot-clr: #BBC0FF;
4 --play: hsl(195, 74%, 62%);
5 width: 200px;
6 height: 170px;
7 border-radius: 10px;
8}
9
10.card {
11 font-family: "Arial";
12 color: #fff;
13 display: grid;
14 cursor: pointer;
15 grid-template-rows: 50px 1fr;
16}
17
18.card:hover .img-section {
19 transform: translateY(1em);
20}
21
22.card-desc {
23 border-radius: 10px;
24 padding: 15px;
25 position: relative;
26 top: -10px;
27 display: grid;
28 gap: 10px;
29 background: var(--primary-clr);
30}
31
32.card-time {
33 font-size: 1.7em;
34 font-weight: 500;
35}
36
37.img-section {
38 transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
39 border-top-left-radius: 10px;
40 border-top-right-radius: 10px;
41 background: hsl(195, 74%, 62%);
42}
43
44.card-header {
45 display: flex;
46 align-items: center;
47 width: 100%;
48}
49
50.card-title {
51 flex: 1;
52 font-size: 0.9em;
53 font-weight: 500;
54}
55
56.card-menu {
57 display: flex;
58 gap: 4px;
59 margin-inline: auto;
60}
61
62.card svg {
63 float: right;
64 max-width: 100%;
65 max-height: 100%;
66}
67
68.card .dot {
69 width: 5px;
70 height: 5px;
71 border-radius: 50%;
72 background: var(--dot-clr);
73}
74
75.card .recent {
76 line-height: 0;
77 font-size: 0.8em;
78}