pixies

1@use "@/common/styles/colors" as *
2
3.features-section
4  padding: 6rem
5  max-width: 1200px
6  margin: 0 auto
7  display: flex
8  flex-direction: column
9  gap: 8rem
10
11.feature-block
12  display: grid
13  grid-template-columns: 1fr 1.3fr
14  gap: 4rem
15  align-items: center
16
17.feature-block.feature-reverse
18  grid-template-columns: 1.3fr 1fr
19
20  .feature-content
21    order: 2
22
23  .feature-image
24    order: 1
25
26.feature-content
27  display: flex
28  flex-direction: column
29  gap: 1rem
30
31.feature-label
32  font-size: 0.8125rem
33  font-weight: 600
34  color: $primary
35  text-transform: uppercase
36  letter-spacing: 0.08em
37
38.feature-content h3
39  font-size: 2rem
40  font-weight: 700
41  line-height: 1.2
42
43.feature-content p
44  font-size: 1.0625rem
45  line-height: 1.7
46  color: $text-secondary
47
48.feature-image
49  position: relative
50
51  img
52    width: 100%
53    border-radius: 12px
54    border: 1px solid $border-color
55
56@media (max-width: 900px)
57  .features-section
58    padding: 4rem 2rem
59    gap: 5rem
60
61  .feature-block,
62  .feature-block.feature-reverse
63    grid-template-columns: 1fr
64    gap: 2rem
65
66    .feature-content,
67    .feature-image
68      order: unset
69
70  .feature-content h3
71    font-size: 1.75rem
72
73@media (max-width: 640px)
74  .features-section
75    padding: 3rem 1.5rem
76    gap: 4rem
77
78  .feature-content h3
79    font-size: 1.5rem
80
81  .feature-content p
82    font-size: 1rem