]>
Commit | Line | Data |
---|---|---|
1 | @import '_variables'; | |
2 | @import '_mixins'; | |
3 | ||
4 | .root { | |
5 | @include margin-left(auto); | |
6 | @include margin-right(auto); | |
7 | ||
8 | height: 100%; | |
9 | text-align: center; | |
10 | padding-top: 150px; | |
11 | display: flex; | |
12 | justify-content: center; | |
13 | flex-direction: column-reverse; | |
14 | ||
15 | .box { | |
16 | text-align: start; | |
17 | font-size: 120%; | |
18 | padding: 0 15px; | |
19 | } | |
20 | ||
21 | img { | |
22 | @include margin-left(auto); | |
23 | ||
24 | width: 220px; | |
25 | height: auto; | |
26 | } | |
27 | ||
28 | @media screen and (max-width: $mobile-view) { | |
29 | img { | |
30 | @include margin-right(auto); | |
31 | } | |
32 | } | |
33 | ||
34 | @media screen and (min-width: $mobile-view) { | |
35 | width: 400px; | |
36 | } | |
37 | ||
38 | @media screen and (min-width: #{breakpoint(lg)}) { | |
39 | width: 600px; | |
40 | } | |
41 | ||
42 | @media screen and (min-width: #{breakpoint(xl)}) { | |
43 | width: 700px; | |
44 | } | |
45 | ||
46 | @media screen and (min-width: #{breakpoint(xxl)}) { | |
47 | width: 800px; | |
48 | } | |
49 | ||
50 | @media screen and (max-height: 600px) { | |
51 | padding-top: 50px; | |
52 | ||
53 | img { | |
54 | width: 160px; | |
55 | } | |
56 | } | |
57 | } |