pixies

1@use "@/common/styles/colors" as *
2
3.feature-grid-section
4  padding: 4rem 6rem 6rem
5  max-width: 1200px
6  margin: 0 auto
7
8.feature-grid-header
9  text-align: center
10  margin-bottom: 3rem
11  
12  h2
13    font-size: 2.25rem
14    font-weight: 700
15    color: $text
16    margin-bottom: 0.75rem
17    letter-spacing: -0.02em
18    
19  p
20    font-size: 1.0625rem
21    color: $text-secondary
22    max-width: 500px
23    margin: 0 auto
24
25.feature-grid-label
26  display: inline-block
27  font-size: 0.8125rem
28  font-weight: 600
29  color: $primary
30  text-transform: uppercase
31  letter-spacing: 0.08em
32  margin-bottom: 0.75rem
33
34.feature-grid
35  display: grid
36  grid-template-columns: repeat(3, 1fr)
37  gap: 1.25rem
38
39.feature-card
40  position: relative
41  display: flex
42  flex-direction: column
43  gap: 1rem
44  padding: 1.75rem
45  background: $background-lighter
46  border: 1px solid $border-color
47  border-radius: 16px
48  transition: all 0.3s ease
49  overflow: hidden
50
51  &:hover
52    transform: translateY(-4px)
53    border-color: $border-hover
54    box-shadow: $shadow-md
55
56.feature-card--blue
57  .feature-icon
58    background: rgba($blue, 0.1)
59    svg
60      color: $blue-light
61
62.feature-card--purple
63  .feature-icon
64    background: rgba($purple, 0.1)
65    svg
66      color: lighten($purple, 10%)
67
68.feature-card--orange
69  .feature-icon
70    background: rgba($orange, 0.1)
71    svg
72      color: lighten($orange, 10%)
73
74.feature-card--green
75  .feature-icon
76    background: rgba($primary, 0.1)
77    svg
78      color: $primary-light
79
80.feature-card--red
81  .feature-icon
82    background: rgba($red, 0.1)
83    svg
84      color: $red-light
85
86.feature-card--cyan
87  $cyan: #06b6d4
88  $cyan-light: #22d3ee
89  .feature-icon
90    background: rgba($cyan, 0.1)
91    svg
92      color: $cyan-light
93
94.feature-icon
95  width: 3rem
96  height: 3rem
97  display: flex
98  align-items: center
99  justify-content: center
100  border-radius: 12px
101  transition: transform 0.3s ease
102
103  svg
104    font-size: 1.25rem
105    transition: transform 0.3s ease
106
107.feature-card:hover .feature-icon svg
108  transform: scale(1.1)
109
110.feature-text
111  display: flex
112  flex-direction: column
113  gap: 0.5rem
114
115.feature-card h3
116  font-size: 1.0625rem
117  font-weight: 600
118  color: $text
119
120.feature-card p
121  font-size: 0.875rem
122  color: $text-secondary
123  line-height: 1.6
124
125@media (max-width: 1100px)
126  .feature-grid-section
127    padding: 3rem 2rem 4rem
128
129  .feature-grid
130    grid-template-columns: repeat(2, 1fr)
131    
132  .feature-grid-header h2
133    font-size: 1.875rem
134
135@media (max-width: 640px)
136  .feature-grid-section
137    padding: 2rem 1.5rem 3rem
138
139  .feature-grid
140    grid-template-columns: 1fr
141    gap: 1rem
142
143  .feature-card
144    padding: 1.5rem
145
146  .feature-grid-header
147    margin-bottom: 2rem
148    
149    h2
150      font-size: 1.5rem
151      
152    p
153      font-size: 1rem