html,
body {
  /* reset */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: oklch(10% 0 0);
}

.wrapper {
  gap: 0.5rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* background: oklch(10% 0 0); */
}

.digit {
  width: max-content;
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(4, 1fr);
  gap: 0.125rem;
}

.clock {
  position: relative;
  height: 1.5rem;
  width: 1.5rem;
  background: oklch(20% 0 0);
  border: 0.15rem solid oklch(30% 0 0);
  border-radius: 1.5rem;
}

.hand {
  height: 0.1875rem;
  background: oklch(0.9475 0.1916 119.15);
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0% -50%;
  width: 50%;
  transform-origin: center left;
  transition: rotate 250ms;
}

.hand:nth-child(1) {
  rotate: 135deg;
}

.hand:nth-child(2) {
  rotate: 270deg;
}