.grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: minmax(13px, 2fr);
  /* will-change: transform; */
  /* transform: translateZ(0); */
  transform:rotateX(180deg);
}

.dot {
  height: 6px;
  width: 6px;
  background-color: red;
  border-radius: 3px;
  animation: 
    /* pulse 1.1s ease infinite alternate, */
    /* nudge 1.2s infinite linear; */
    pulse 1.1s ease alternate,
    nudge 1.2s linear;
}

.spike {
  animation: 
    /* pulse 1.1s ease infinite alternate,  */
    /* nudge 1.2s linear infinite, */
    pulse 1.1s ease alternate, 
    nudge 1.2s linear,
    nudgebig 1.1s linear;
}

.dot:nth-child(1) {
  animation-delay: .3s;
}

.dot:nth-child(2) {
  animation-delay: .6s;
}

.dot:nth-child(3) {
  animation-delay: .9s;
}

.dot:nth-child(4) {
  animation-delay: 1.2s;
}

.dot:nth-child(5) {
  animation-delay: 1.5s;
}

@keyframes nudge {
  0% {
    transform: translate(0, 0);
  }
  
  25% {
    transform: translate(0, 6px);
  }
  
   50% {
    transform: translate(0, 12px);
  }
  
   75% {
    transform: translate(0, 6px);
  }
  
  100% {
    transform: translate(0, 0);
  }
}

@keyframes nudgebig {
  0% {
    transform: translate(0, 0);
  }
  
  25% {
    transform: translate(0, 24px);
  }
  
   50% {
    transform: translate(0, 48px);
  }
  
   75% {
    transform: translate(0, 24px);
  }
  
  100% {
    transform: translate(0, 0);
  }
}

@keyframes pulse {
  0%, 100% {
    /* background-color: red; */
    opacity: 1;
  }
  50% {
    /* background-color: lightgrey; */
    opacity: 0.1;
  }
}