1  @import '../../../common/styles/variables';
 2  
 3  .grid {
 4    display: grid;
 5    grid-template-columns: 1fr 1fr 1fr;
 6    grid-template-rows: unset;
 7    position: relative;
 8    margin: 0 calculateRem(10) calculateRem(30) calculateRem(10);
 9    overflow-x: scroll;
10    overflow-y: hidden;
11    -webkit-overflow-scrolling: touch;
12  
13    @media (min-width: $desktop) {
14      grid-template-columns: 1fr 1fr 1fr;
15      grid-template-rows: unset;
16      overflow-x: hidden;
17    }
18  }
19  
20  .dapp {
21    min-width: 220px;
22    font-family: $font;
23    background: $background;
24    display: flex;
25    flex-direction: column;
26    margin: 0 calculateRem(20) calculateRem(20) calculateRem(20);
27    text-decoration: none;
28  }
29  
30  .bannerWrapper {
31    width: 100%;
32    height: 0;
33    position: relative;
34    padding-bottom: 48%;
35  
36    .banner {
37      width: 100%;
38      height: 100%;
39      position: absolute;
40      left: 0;
41      top: 0;
42      border-radius: 20px;
43      object-fit: cover;
44    }
45  }
46  
47  .dapp_details {
48    display: flex;
49    flex-direction: row;
50  }
51  
52  .dapp_details__image {
53    max-width: calculateRem(40);
54    max-height: calculateRem(40);
55    margin-top: calculateRem(10);
56    margin-right: calculateRem(16);
57    border-radius: 50%;
58  }
59  
60  .dapp_details__header {
61    color: $headline-color;
62    font-size: calculateRem(15);
63    line-height: calculateRem(22);
64    margin-bottom: calculateRem(2);
65    margin-top: calculateRem(12);
66    font-weight: 500;
67  }
68  
69  .dapp_details__description {
70    color: $text-color;
71    font-size: calculateRem(13);
72    line-height: calculateRem(18);
73    margin-bottom: calculateRem(2);
74    margin-top: 0;
75    max-height: calculateRem(40);
76    overflow-y: hidden;
77  }