.datas {
    font-size: 20px;
}

.charts {
    box-sizing: border-box;
    width: 100%;
    grid-column-end: 0%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 500px);
    column-gap: 50px;
    row-gap: 50px;
    margin: auto auto;
    margin-top: 30px;
    justify-content: center;
    align-content: center;
}

/* responsive chart */
.chart {
    width:500px;
    height: 250px;
}

@media screen and (max-width: 600px) {
    .chart {
        width:280px;
        height: 140px;
    }

    .charts {
        box-sizing: border-box;
        width: 100%;
        grid-column-end: 0%;
        display: grid;
        grid-template-columns: repeat(auto-fill, 300px);
        column-gap: 50px;
        row-gap: 0px;
        margin: 0px 0px 0px 0px;
        margin-left: 20px;
        margin-top: 30px;
        justify-content: center;
        align-content: center;
    }
}

.inf {
    margin-left: 20px;
}