1 .Box {
2 width: 100%;
3 max-width: 960px;
4 }
5
6 .Box_1 {
7 width: 100%;
8 }
9
10 /* DefaultLayout wrapper - p: [4, 5, 6, 7] = 24px, 32px, 40px, 48px */
11 .Box_2 {
12 justify-content: center;
13 display: flex;
14 max-width: 1200px;
15 margin-left: auto;
16 margin-right: auto;
17 width: 100%;
18 padding: 24px;
19 }
20
21 @media (min-width: 544px) {
22 .Box_2 {
23 padding: 32px;
24 }
25 }
26
27 @media (min-width: 768px) {
28 .Box_2 {
29 padding: 40px;
30 }
31 }
32
33 @media (min-width: 1012px) {
34 .Box_2 {
35 padding: 48px;
36 }
37 }
38
39 /* mb: 4 = 24px */
40 .Box_3 {
41 margin-bottom: 24px;
42 }
43
44 /* fontSize: 3 = 20px, mb: 3 = 16px */
45 .Box_4 {
46 font-size: 20px;
47 margin-bottom: 16px;
48 }
49
50 /* bg: 'canvas.inset', py: [0, 4, 5, 6] = 0, 24px, 32px, 40px */
51 /* canvas.inset in dark mode - slightly darker than #333333 */
52 .DarkTheme {
53 background-color: #292929;
54 padding-top: 0;
55 padding-bottom: 0;
56 }
57
58 @media (min-width: 544px) {
59 .DarkTheme {
60 padding-top: 24px;
61 padding-bottom: 24px;
62 }
63 }
64
65 @media (min-width: 768px) {
66 .DarkTheme {
67 padding-top: 32px;
68 padding-bottom: 32px;
69 }
70 }
71
72 @media (min-width: 1012px) {
73 .DarkTheme {
74 padding-top: 40px;
75 padding-bottom: 40px;
76 }
77 }
78
79 /* p: 5 = 32px, mx: auto */
80 .Container {
81 padding: 32px;
82 margin-left: auto;
83 margin-right: auto;
84 }
85
86 /* color: 'fg.default' in dark_dimmed = #E1E4E8, fontSize: 7 = 48px, m: 0 */
87 .Heading {
88 color: #e1e4e8;
89 font-size: 48px;
90 margin: 0;
91 }
92
93 /* m: 0, color: 'fg.onEmphasis' = white, fontSize: 4 = 24px */
94 .Text {
95 margin: 0;
96 color: rgba(255, 255, 255, 0.9);
97 font-size: 24px;
98 }