-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
style.module.css
136 lines (132 loc) · 3.38 KB
/
style.module.css
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
130
131
132
133
134
135
136
.feature {
position: relative;
padding: 1.5rem 1.75rem;
color: #000;
background-color: white;
overflow: hidden;
border-radius: 0.8em;
clip-path: polygon(
1.389012em 0em,
calc(100% - 1.389012em) 0em,
calc(100% - 1.194572em) 0.001596em,
calc(100% - 1.000425em) 0.011608em,
calc(100% - 0.807927em) 0.03823em,
calc(100% - 0.620879em) 0.090424em,
calc(100% - 0.445587em) 0.173591em,
calc(100% - 0.292642em) 0.292642em,
calc(100% - 0.173591em) 0.445587em,
calc(100% - 0.090424em) 0.620879em,
calc(100% - 0.03823em) 0.807927em,
calc(100% - 0.011608em) 1.000425em,
calc(100% - 0.001596em) 1.194572em,
100% 1.389012em,
100% calc(100% - 1.389012em),
calc(100% - 0.001596em) calc(100% - 1.194572em),
calc(100% - 0.011608em) calc(100% - 1.000425em),
calc(100% - 0.03823em) calc(100% - 0.807927em),
calc(100% - 0.090424em) calc(100% - 0.620879em),
calc(100% - 0.173591em) calc(100% - 0.445587em),
calc(100% - 0.292642em) calc(100% - 0.292642em),
calc(100% - 0.445587em) calc(100% - 0.173591em),
calc(100% - 0.620879em) calc(100% - 0.090424em),
calc(100% - 0.807927em) calc(100% - 0.03823em),
calc(100% - 1.000425em) calc(100% - 0.011608em),
calc(100% - 1.194572em) calc(100% - 0.001596em),
calc(100% - 1.389012em) 100%,
1.389012em 100%,
1.194572em calc(100% - 0.001596em),
1.000425em calc(100% - 0.011608em),
0.807927em calc(100% - 0.03823em),
0.620879em calc(100% - 0.090424em),
0.445587em calc(100% - 0.173591em),
0.292642em calc(100% - 0.292642em),
0.173591em calc(100% - 0.445587em),
0.090424em calc(100% - 0.620879em),
0.03823em calc(100% - 0.807927em),
0.011608em calc(100% - 1.000425em),
0.001596em calc(100% - 1.194572em),
0em calc(100% - 1.389012em),
0em 1.389012em,
0.001596em 1.194572em,
0.011608em 1.000425em,
0.03823em 0.807927em,
0.090424em 0.620879em,
0.173591em 0.445587em,
0.292642em 0.292642em,
0.445587em 0.173591em,
0.620879em 0.090424em,
0.807927em 0.03823em,
1.000425em 0.011608em,
1.194572em 0.001596em,
1.389012em 0em
);
}
.feature.large {
grid-column: span 2;
}
.feature.centered {
text-align: center;
}
.feature h3 {
position: relative;
font-size: 34px;
font-size: min(34px, max(4vw, 24px));
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02rem;
z-index: 2;
}
:global(.dark) .feature:not(.light-only) {
color: #fff;
background-color: #202020;
}
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2em;
font-feature-settings: initial;
}
.feature :global(.show-on-mobile) {
display: none;
}
@media screen and (max-width: 1024px) {
.feature {
max-width: 80vw;
width: 100%;
}
.feature.large {
grid-column: span 1;
}
.features {
grid-template-columns: 1fr;
grid-gap: 3em;
justify-items: center;
}
.feature h3 {
font-size: 28px;
font-size: min(28px, max(4vw, 22px));
text-align: center;
}
}
@media screen and (max-width: 640px) {
.feature {
max-width: 460px;
width: 100%;
}
.feature.large {
grid-column: span 1;
}
.features {
grid-template-columns: 1fr;
grid-gap: 3em;
justify-items: center;
}
.feature h3 {
font-size: 34px;
font-size: min(34px, max(4vw, 22px));
text-align: center;
}
.feature :global(.show-on-mobile) {
display: block;
}
}