.visual-box:has(.practice-clock) {
  letter-spacing: normal;
  padding: 18px;
}

.practice-clock {
  position: relative;
  width: 220px;
  height: 220px;
  margin: auto;
  border: 8px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #eee9ff, 0 10px 25px rgba(51, 39, 99, .12);
  direction: ltr;
}

.clock-number {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "Varela Round", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 5px;
  border-radius: 6px;
  background: var(--ink);
  transform-origin: 50% 100%;
  z-index: 2;
}

.clock-hand.hour {
  width: 7px;
  height: 58px;
}

.clock-hand.minute {
  height: 78px;
  background: var(--purple);
}

.clock-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--purple);
  transform: translate(-50%, -50%);
  z-index: 3;
}

@media (max-width: 560px) {
  .practice-clock {
    width: 190px;
    height: 190px;
  }

  .clock-number {
    font-size: 16px;
  }

  .clock-hand.hour {
    height: 49px;
  }

  .clock-hand.minute {
    height: 67px;
  }
}