.spinner {
  display: none;
  margin: 2rem auto;
  width: 7rem;
  text-align: center;

  .spinner--show & { display: block; }
}

.spinner__dot {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-primary);
  border-radius: 100%;
  display: inline-block;
  animation: spinner-bounce 1.4s infinite ease-in-out both;
}

.spinner__dot--1 {
  animation-delay: -0.32s;
}

.spinner__dot--2 {
  border-color: var(--color-secondary);
  animation-delay: -0.16s;
}

.spinner__dot--3 {
  border-color: var(--color-tertiary);
}

@keyframes spinner-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}