.track{
  display:grid;
  grid-template-columns:minmax(96px,132px) minmax(0,1fr) 62px;
  grid-template-rows:auto auto;
  align-items:center;gap:2px var(--s2);
  padding:10px 0;
  border-bottom:2px solid var(--void-dot);
}
.track:last-of-type{border-bottom:0;}

.track__name{
  grid-column:1;grid-row:1;align-self:end;
  font-family:"IBM Plex Mono",monospace;font-size:.875rem;font-weight:600;
  overflow-wrap:anywhere;line-height:1.1;
}
.track__expect{
  grid-column:1;grid-row:2;align-self:start;
  font-size:var(--t-tick);color:var(--dimmer);
  letter-spacing:.03em;line-height:1.25;
}

.track__cells{
  grid-column:2;grid-row:1/3;
  display:flex;gap:1px;height:26px;align-items:stretch;
  border:2px solid var(--ink);background:var(--ink);
}
.track__cell{flex:1 1 0;min-width:2px;}
.track__cell--live{background:var(--healthy);}
.track__cell--infected{
  background:var(--infected);
  background-image:repeating-linear-gradient(
    to bottom,transparent 0 3px,var(--ink) 3px 5px);
}
.track__cell--dead{
  background:var(--critical);
  background-image:repeating-linear-gradient(
    45deg,transparent 0 2px,var(--ink) 2px 4px);
}

.track__rate{
  grid-column:3;grid-row:1/3;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:1rem;font-weight:600;text-align:right;
}
.track__rate small{display:block;font-size:var(--t-tick);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer);font-weight:700;
  white-space:nowrap;margin-right:-.1em;}

.track__scale{
  display:flex;justify-content:space-between;
  margin:6px 0 0;font-family:"IBM Plex Mono",monospace;
  font-size:var(--t-tick);letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);
}

@media(max-width:600px){
  .track{grid-template-columns:minmax(0,1fr) 62px;grid-template-rows:auto auto auto;}
  .track__name{grid-column:1;grid-row:1;}
  .track__expect{grid-column:1;grid-row:2;}
  .track__rate{grid-column:2;grid-row:1/3;}
  .track__cells{grid-column:1/-1;grid-row:3;margin-top:7px;}
}
