.history-container {
    display: grid;
    grid-template-rows: repeat(auto, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 8px;
}

.history-row {
    display: grid;
    grid-template-columns: 100px 60px auto;
}

.history-year {
    grid-area: 1 / 1 / 2 / 2;
}

.history-noyear {
    grid-area: 1 / 1 / 2 / 2;
}

.history-month {
    grid-area: 1 / 2 / 2 / 3;
}

.history-summary {
    grid-area: 1 / 3 / 2 / 4;
}


@media (max-width: 768px) {
    .history-row {
        display: grid;
        grid-template-columns: 60px auto;
    }

    .history-year {
        grid-area: 1 / 1 / 2 / 4;
    }

    .history-noyear {
        display: none;
    }

    .history-month {
        grid-area: 2 / 1 / 3 / 3;
    }

    .history-summary {
        grid-area: 2 / 3 / 2 / 4;
    }
}