mobile.css

@media only screen and (max-width:1400px) {
    .achievement-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .achievement {
        width: 120px;
    }

    .dimension {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: 3fr 3fr 3fr 1fr;
        gap: 5px;
    }
    .dimension-name {
        grid-row: 1;
        grid-column: 1 / 3;
    }
    .dimension-production {
        grid-row: 2;
        grid-column: 1;
    }
    .dimension-amount {
        grid-row: 2;
        grid-column: 2;
    }
    .dimension-cost {
        grid-row: 1 / 3;
        grid-column: 3;
    }
    .dimension-autobuyer {
        grid-row: 1 / 3;
        grid-column: 4;
        justify-self: center;
    }

    .upgrade-list-atomic .upgrade {
        grid-template-columns: 3fr 4fr 4fr;
        grid-template-rows: 2em 3fr 1fr 2em;
    }
    .upgrade-atomic-level {
        grid-column: 2 / 4;
    }
    .upgrade-atomic-milestones {
        grid-row: 2;
        grid-column: 2 / 4;
    }
    .upgrade-atomic-effect-desc {
        grid-row: 3 / 5;
        grid-column: 2;
    }
    .upgrade .upgrade-atomic-buy-max-button {
        grid-row: 4;
        grid-column: 3;
    }

    .collider-reaction-table {
        font-size: 0.75em;
    }
}