@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: var(--sp-sm);
  font-family: var(--font-fun);
  font-size: 1.5rem;

  div {
    display: grid;

    small {
      font-size: 0.75rem;
      font-family: var(--font-sans-serif);
    }
  }
}

.countdown .pulse {
  display: inline-block;
  will-change: transform, opacity;
}

.countdown .pulse.is-pulsing {
  animation: pulse 0.4s ease-out;
}