.load {
  width: 100%;
  height: 400px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:2px;
}

.load > .dot1, .load > .dot2, .load > .dot3, .load > .dot4, .load > .dot5 {
  width: 50px;
  height: 50px;
  background: #000000;
  border-radius:50%;
  color: azure;
  animation: translate 1s ease-in-out infinite;
}

.load > .dot2 {
  animation-delay: 0.2s;
}

.load > .dot3 {
  animation-delay: 0.4s;
}
.load > .dot4 {
  animation-delay: 0.6s;
}

@keyframes translate {
  0% {
    transform:translateX(0);
  }
  100% {
    transform: translatey(20px);
  }
}

@media (min-width:768px) and (max-width:992px){
  .transform{
    display: grid;
    grid-template-columns: 50;
}

.clock > div {
  
}

}