mpusp.github.io/src/components/About/styles.module.css at 36dc8adf216046d8a3fb211d77501c6931d5de88 · MPUSP/mpusp.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
.about {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.section_padding {
  padding: 1rem 6rem;
}

.about_description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-bottom: 1rem;
}

.about_description h1 {
  font-weight: 700;
  font-size: 32px;
  line-height: 30px;
}

.about_description p {
  font-size: 18px;
  font-weight: 500;
  text-align: justify;
  padding: 10px;
}

.stats_container {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-bottom: 2rem;
}

.stats1_card,
.stats2_card {
  display: grid;
  grid-template-columns: repeat(4, auto);
}

.stats1_card a,
.stats2_card a {
  text-decoration: none;
  color: var(--ifm-font-color-base);
}

.card {
  background: var(--theme-card);
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 35px 20px 35px;
  margin: 5px;
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

.card:hover {
  transform: scale(0.95);
}

.card h1 {
  margin: 0;
  background-image: linear-gradient(
    90deg,
    var(--ifm-color-primary-dark),
    var(--ifm-color-primary-lightest)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card h3 {
  margin: 0;
  font-weight: 600;
  margin-top: 5px;
}

@media screen and (max-width: 1050px) {
  .about_description {
    margin-bottom: 1rem;
  }

  .stats1_card,
  .stats2_card {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 650px) {
  .about_description {
    padding: 1rem;
  }

  .about_description h1 {
    font-size: 28px;
    line-height: 26px;
  }

  .stats1_card,
  .stats2_card {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 490px) {
  .section_padding {
    padding: 1rem;
  }

  .about_description h1 {
    font-size: 24px;
    line-height: 22px;
  }

  .about_description p {
    font-size: 16px;
  }
}