File tree Expand file tree Collapse file tree 1 file changed +0
-246
lines changed Expand file tree Collapse file tree 1 file changed +0
-246
lines changed Original file line number Diff line number Diff line change 77 padding : 1rem 0 ;
88}
99
10- .lightBg {
11- background-color : $white ;
12- }
13-
1410.align__left {
1511 display : flex ;
1612 flex-wrap : wrap ;
2016 justify-content : space-between ;
2117 }
2218}
23-
24- .wrapper {
25- justify-content : center ;
26- flex-wrap : wrap ;
27- display : flex ;
28- @include desktop {
29- flex-direction : row ;
30- }
31-
32- @include mobile {
33- flex-direction : column ;
34- }
35-
36- .inner {
37- padding : 5rem 0 ;
38- margin : 0 auto ;
39- width : 90% ;
40- max-width : $large-desktop-breakpoint ;
41-
42- .inner__content {
43- margin-bottom : 5rem ;
44- @include desktop {
45- flex-basis : 50% ;
46- margin-bottom : 0 ;
47- }
48-
49- .title {
50- font-weight : bold ;
51- color : $primary-content-color ;
52- margin : 0 ;
53- }
54-
55- .content {
56- display : flex ;
57- align-items : center ;
58- margin : 3.875rem 0 2.5rem ;
59- max-width : 39rem ;
60- font-size : 1.5rem ;
61- line-height : 1.938rem ;
62-
63- a {
64- text-decoration : underline ;
65- text-underline-offset : 2px ;
66-
67- & :hover {
68- opacity : 0.6 ;
69- text-decoration : none ;
70- }
71- }
72- }
73- }
74-
75- .inner__image {
76- width : 100% ;
77- height : 34rem ;
78- position : relative ;
79-
80- @include desktop {
81- width : 25rem ;
82- }
83-
84- .img {
85- border-radius : 0.25rem ;
86- object-fit : cover ;
87- }
88- }
89-
90- // Homepage
91- & .get-involved {
92- @include desktop-breakpoint-minus {
93- padding-bottom : 0 ;
94- }
95- }
96-
97- & .non-profit {
98- @include desktop-breakpoint-minus {
99- .inner__content {
100- margin-bottom : 0 ;
101- }
102- }
103- }
104-
105- // About us
106- & .our-background {
107- .inner__image {
108- height : 14rem ;
109-
110- @include desktop {
111- height : 18rem ;
112- }
113-
114- .img {
115- object-fit : contain ;
116- }
117- }
118- }
119-
120- & .about-content ,
121- & .get-started {
122- .content {
123- max-width : 49rem ;
124- }
125-
126- .inner__content {
127- flex-basis : 65% ;
128- }
129-
130- .inner__image {
131- height : 10rem ;
132- flex-basis : 25% ;
133-
134- @include desktop {
135- height : 15rem ;
136- }
137-
138- .img {
139- max-width : 14rem ;
140- object-fit : contain ;
141- }
142- }
143- }
144-
145- & .our-purpose {
146- .inner__content {
147- flex-basis : 65% ;
148- }
149-
150- .inner__image {
151- height : 10rem ;
152- flex-basis : 25% ;
153-
154- @include desktop {
155- height : 22rem ;
156- }
157-
158- .img {
159- object-fit : contain ;
160- }
161- }
162- }
163-
164- & .wanna-learn-more {
165- .content {
166- margin : 0 ;
167- }
168-
169- .inner__content {
170- flex-basis : 70% ;
171- }
172-
173- .inner__image {
174- height : 10rem ;
175- flex-basis : 30% ;
176-
177- @include desktop {
178- height : 20rem ;
179- }
180-
181- .img {
182- object-fit : contain ;
183- }
184- }
185- }
186-
187- & .two-text-columns {
188- justify-content : space-evenly ;
189-
190- .inner {
191- padding : 0px ;
192- margin : 0px ;
193- }
194-
195- .inner__content {
196- display : flex ;
197- flex-direction : column ;
198- align-items : flex-start ;
199- }
200-
201- h2 {
202- font-size : 2rem ;
203- line-height : 2.5rem ;
204- }
205-
206- .inner {
207- margin : 0px ;
208- padding : 0px ;
209- }
210-
211- .inner__content {
212- flex-basis : unset ;
213-
214- @include desktop {
215- width : 25rem ;
216- }
217- }
218-
219- a {
220- margin-top : auto ;
221- color : $light-bg-color ;
222- }
223-
224- a :hover {
225- color : $primary-content-color ;
226- }
227- }
228-
229- & .second-text-column {
230- height : 100% ;
231- width : 100% ;
232-
233- .inner {
234- height : 100% ;
235- }
236-
237- .inner__content {
238- height : 100% ;
239- }
240- }
241-
242- & .get-started {
243- padding-bottom : 0px ;
244- .inner__image {
245- display : none ;
246-
247- @include desktop {
248- display : unset ;
249- }
250- }
251-
252- @include desktop {
253- padding-bottom : 5rem ;
254- }
255- }
256-
257- @include desktop {
258- display : flex ;
259- align-items : center ;
260- justify-content : space-between ;
261- flex-wrap : wrap ;
262- }
263- }
264- }
You can’t perform that action at this time.
0 commit comments