File size: 1,241 Bytes
88ec217
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.ngrams-cluster {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
.ngrams-cluster .charts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    justify-content: flex-start;
}
.ngrams-cluster .chart {
    background: var(--color-primary-card-bg);
    padding: 1rem;
    position: relative;
    height: fit-content;
    min-height: var(--height-ngrams-cluster);
    /* 2 items per row on wide screens */
    flex: 1 1 calc(33.333% - 0.67rem); 
    min-width: var(--height-ngrams-cluster);
    max-width: calc(33.333% - 0.67rem);
}
@media (max-width: 1200px) {
    .ngrams-cluster .chart {
        flex: 1 1 calc(33.333% - 0.67rem);
        max-width: calc(33.333% - 0.67rem);
    }
}
@media (max-width: 915px) {
    .ngrams-cluster .charts {
        flex-direction: column;
    }
    .ngrams-cluster .chart {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: unset;
    }
}
@media (max-width: 768px) {
    .ngrams-cluster .charts {
        flex-direction: column;
    }
    .ngrams-cluster .chart {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: unset;
    }
}
@media (max-width: 480px) {
    .ngrams-cluster .charts {
        gap: 0.5rem;
    }
}