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