1.card {
2  --width: 190px;
3  --height: 210px;
4  --primary: #00b9ae;
5  --text: #f9f9f9b2;
6  --secondary: #f9f9f933;
7  --radius: 20px;
8  color: #fff;
9  font-family: Arial, Helvetica, sans-serif;
10  width: var(--width);
11  height: var(--height);
12  background: linear-gradient(
13      180deg,
14      rgba(22, 24, 30, 0) 0%,
15      rgba(22, 24, 30, 0.7) 65.28%
16    ),
17    linear-gradient(0deg, rgba(22, 24, 30, 0.4), rgba(22, 24, 30, 0.4));
18  background-size: cover;
19  border-radius: var(--radius);
20  display: flex;
21  flex-direction: column;
22  gap: 0.7rem;
23  padding: 1em;
24  padding-top: 1.4em;
25}
26
27
28/*  */
29
30.card .card__title {
31  margin: 0;
32  font-size: 1.2rem;
33  font-weight: bold;
34  margin-top: 0.2rem;
35}
36
37.rating {
38  margin-top: 0.5em;
39  width: 85px;
40  height: 16px;
41  background-image: url("data:image/svg+xml,%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20width%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20height%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2017%2017%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M8.51948%201.625C9.1214%201.625%2010.0427%204.16625%2010.4636%205.43013C10.6014%205.8437%2010.9837%206.13054%2011.4192%206.14904C12.7373%206.20505%2015.375%206.39722%2015.375%207.0384C15.375%207.66696%2013.5161%209.17543%2012.5322%209.92976C12.1816%2010.1986%2012.0365%2010.6604%2012.1687%2011.082C12.5631%2012.34%2013.2755%2014.8755%2012.7573%2015.3009C12.2506%2015.717%2010.2147%2014.2326%209.15246%2013.4009C8.77021%2013.1016%208.22949%2013.1012%207.84719%2013.4004C6.78473%2014.2321%204.75246%2015.717%204.28166%2015.3009C3.79912%2014.8745%204.47615%2012.3275%204.84741%2011.0727C4.97086%2010.6555%204.82425%2010.2029%204.47885%209.93826C3.49798%209.18681%201.625%207.66933%201.625%207.0384C1.625%206.3962%204.2711%206.20444%205.5871%206.14878C6.0197%206.13048%206.3998%205.84769%206.53973%205.43793C6.97041%204.17673%207.91633%201.625%208.51948%201.625Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
42  background-repeat: space;
43}
44
45.card .card__info {
46  display: flex;
47  margin-top: auto;
48  font-size: 0.8rem;
49  color: var(--text);
50  font-weight: 400;
51  justify-content: space-between;
52}
53
54.card .card__btns {
55  display: flex;
56  gap: 0.6rem;
57}
58
59.card button {
60  border: none;
61  background: none;
62  cursor: pointer;
63  background: var(--primary);
64  color: #fff;
65  border-radius: var(--radius);
66  padding: 0.5rem 1rem;
67  font-size: 1rem;
68  font-weight: bold;
69  transition: 0.2s;
70}
71
72.card button:hover {
73  opacity: 0.8;
74  transform: scale(0.9);
75}
76
77.card .add-btn {
78  color: #fff;
79  padding: 0.5em 0.8em;
80  background: rgba(249, 249, 249, 0.2);
81  border-radius: 14px;
82}
83
84.card .watch-btn {
85  flex: 1;
86}
87