.mod-record {
  --record-layout: repeat(3, 1fr);
  --record-num-shrink: 4;
  display: grid;
  grid-template-columns: var(--record-layout);
  justify-items: center;
  gap: 2rem;
}
@media (min-width: 768px) {
  .mod-record {
    --record-num-shrink: 3;
  }
}
.mod-record .record-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1024px) {
  .mod-record {
    --record-layout: repeat(5, 1fr);
  }
}
.mod-record .value {
  display: flex;
  align-items: flex-end;
}
.mod-record .num,
.mod-record .i {
  font-family: bc;
  color: #ff9b19;
  font-size: calc(var(--root-base-size) * var(--record-num-shrink));
}
.mod-record .uint {
  color: #444;
}
.mod-record .laber {
  color: #444;
  font-size: 1rem;
  margin-top: 0.8rem;
}