pixies

1@use "@/common/styles/colors" as *
2
3.overview-items
4  display: flex
5  justify-content: center
6  flex-direction: column
7  width: 100%
8  overflow-y: clip
9
10.overview-item
11  display: flex
12  justify-content: space-between
13
14.overview-item .info-area
15  display: flex
16  justify-content: center
17  align-content: center
18  align-items: center
19  gap: 1rem
20
21  & svg
22    width: 2.25rem
23    height: 2.25rem
24    color: $subtext
25
26.overview-item .info-area .text-area
27  & h2
28    margin: 0
29    color: $white
30    font-size: 1rem
31    font-weight: 600
32  & p
33    margin: 0
34    font-weight: 500
35    color: $subtext
36    font-size: 0.9rem
37
38.overview-item h2
39  color: $accent-primary
40  font-weight: 700
41
42@media screen and (max-width: 1500px)
43  .overview-item
44    flex-wrap: wrap
45    flex-direction: row
46
47@media screen and (max-width: 1400px)
48  .info-area svg
49    display: none
50  .overview-item .info-area h2
51    display: inline-block
52    width: 15rem
53    white-space: nowrap
54    overflow: hidden !important
55    text-overflow: ellipsis
56  .overview-item .info-area .text-area p
57    display: none
58
59@media screen and (max-width: 1000px)
60  .overview-item .info-area h2
61    width: 10rem