1  @import '../../common/styles/variables';
 2  
 3  .header {
 4    display: flex;
 5    justify-content: space-between;
 6    margin: calculateRem(15);
 7    align-items: center;
 8  }
 9  
10  .headline {
11    font-family: $font;
12    font-size: calculateRem(17);
13    margin: 0;
14  }
15  
16  .categories {
17    display: grid;
18    grid-template-columns: 1fr 1fr 1fr;
19    grid-template-rows: 1fr 1fr 1fr;
20    margin: 0 calculateRem(10) calculateRem(30) calculateRem(10);
21  
22    @media (min-width: $desktop) {
23      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
24      grid-template-rows: unset;
25    }
26  }
27  
28  .category {
29    background: $background;
30    font-family: $font;
31    font-size: calculateRem(13);
32    line-height: calculateRem(16);
33    color: $headline-color;
34    border: none;
35    border-radius: calculateRem(12);
36    padding: calculateRem(12);
37    margin: calculateRem(4);
38    cursor: pointer;
39    text-align: -webkit-center;
40    overflow: hidden;
41    display: flex;
42    flex-direction: column;
43    justify-content: flex-start;
44  
45    p {
46      margin-bottom: 0;
47      font-weight: 500;
48    }
49  }
50  
51  .EXCHANGES {
52    background: $purple-bg;
53  }
54  
55  .MARKETPLACES {
56    background: $orange-bg;
57  }
58  
59  .OTHER {
60    background: $yellow-bg;
61  }
62  
63  .MEDIA {
64    background: $yellow-bg;
65  }
66  
67  .GAMES {
68    background: $pink-bg;
69  }
70  
71  .COLLECTIBLES {
72    background: $blue-bg;
73  }
74  
75  .SOCIAL_NETWORKS {
76    background: $green-bg;
77  }
78  
79  .UTILITIES {
80    background: $red-bg;
81  }