.grid { display:grid; grid-template-columns: repeat(6,1fr); column-gap: 1em; row-gap: 1em; }
.grid .box { background:#888; border:1px solid #fff; padding:0.8em 1em; border-radius:1.5em; }
.grid .box .label { color:white; opacity:0.65; }
.grid .box .value { display:inline; color:white; font-size:200%; font-weight:bold; }
.grid .box .unit { display:inline; color:white; opacity:0.75; }
.grid .box.mid { grid-column: span 3; }
.grid .box.max { grid-column: span 6; }

.grid .box.mid .label,
.grid .box.max .label { font-size:150%; font-weight:bold; opacity:1.0; }

@media screen and (max-width:800px) {
    .grid .box { grid-column: span 2; }
    .grid .box.mid { grid-column: span 6; }
}

@media screen and (max-width:480px) {
    .grid .box { grid-column: span 3; }
}

@media screen and (max-width:320px) {
    .grid .box { grid-column: span 6; }
}