zitadel

1
.card {
2
  border-radius: 0.5rem;
3
  display: flex;
4
  flex-direction: column;
5
  min-width: 200px;
6
  background: var(--card-background);
7
  padding: 1rem;
8
  text-decoration: none;
9
  transition: all 0.2 ease-in-out;
10
  border: 1px solid var(--card-border);
11
}
12

13
.card:hover {
14
  text-decoration: none;
15
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
16
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
17
}
18

19
.card p {
20
  font-size: 14px;
21
  margin: 0;
22
  color: var(--ifm-font-color-base);
23
}
24

25
.cardimg {
26
  height: 100px;
27
  background-size: cover;
28
  object-fit: contain;
29
  background-position: center;
30
  padding: 0.5rem 0;
31
  pointer-events: none;
32
  box-shadow: none !important;
33
}
34

35
.fillspace {
36
  flex: 1;
37
}
38

39
.bottom {
40
  display: flex;
41
  align-items: center;
42
}
43

44
.bottomicon {
45
  width: 24px;
46
  margin-right: 0.5rem;
47
  color: var(--ifm-font-color-base);
48
}
49

50
.bottomspan {
51
  font-size: 12px;
52
  font-weight: 600;
53
  color: var(--ifm-font-color-base);
54
  text-transform: uppercase;
55
  margin: 0;
56
}
57

58
.cardWrapper {
59
  display: grid;
60
  grid-template-columns: 1fr;
61
  grid-gap: 1rem;
62
}
63

64
@media (min-width: 769px) {
65
  .cardWrapper {
66
    grid-template-columns: 1fr 1fr;
67
  }
68
}
69

70
@media (min-width: 1180px) {
71
  .cardWrapper {
72
    grid-template-columns: 1fr 1fr 1fr;
73
  }
74
}
75