html, body {
  margin: 0;
  background: #111;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-items: start;
}

/* Each clock block */
.clock {
  display: flex;
  flex-direction: column;
  /*gap: 8px;*/
  width: fit-content; /* ensures label + canvas share width */
}

.clock label {
  background: #ccc;
  color: #000; /* nope */
  font-size: 36px;
  /*font-weight: 600;*/
  text-align: center;
  width: 600px;
}

.old label {
  width: 590px;
  height: 50px;
  background: #ccc;
  padding: 5px;
  color: #000; /* nope */
  font-size: 36px;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  /*display: inline-block;*/
  /* https://www.w3schools.com/css/css_text_align.asp */
  text-align: center;
  /*vertical-align: middle;  nope */
  /*top: 100px; nope */
}

/* Mobile: collapse to one column */
@media (max-width: 1000px) {
  .grid {
    grid-template-columns: 1fr;
  }
}