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;
}
} |