.countdown-timer {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--space-5);
  color: var(--brand-navy-900);
}

.countdown-timer__unit {
  display: grid;
  gap: var(--space-1);
  text-align: center;
}

.countdown-timer__value {
  font-family: var(--font-numeric);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--leading-h1);
}

.countdown-timer__label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.countdown-timer--warning {
  color: var(--color-warning-500);
}

.countdown-timer--danger {
  color: var(--color-danger-500);
}

.countdown-timer--urgent {
  color: var(--color-danger-500);
  animation: countdown-pulse 2s ease-in-out infinite;
}

@keyframes countdown-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}