.btn {
  display: inline-block;
  padding: .5rem 2rem;
  font-size: 0.875rem; line-height: 1.25rem;
  font-weight: 600;
  border-radius: .5rem;

  &:hover {
    transform: translateY(var(--translateY, -1px));
  }
}

.btn--lg {
  padding: .75rem 2.75rem;
  font-size: 1.25rem;

  @media (min-width: 640px) {
    padding: 1rem 3rem;
    font-size: 1.5rem;
  }
}

.btn--primary {
  background-color: var(--gray-950);
  color: var(--gray-50);

  &:hover {
    background-color: var(--gray-800);
  }
}

.btn--diap {
  background-color: var(--gray-50);
  color: var(--gray-950);

  &:hover {
    background-color: var(--gray-200);
  }
}