.btn-primary {
  display: inline-block;
  background: var(--primary);
  color: var(--text-beige);
  transition:
    background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-hero-primary {
  background: var(--btn-hero-primary);
  color: var(--text);
  transition:
    background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-hero-primary:hover {
  background: var(--btn-hero-primary-hover);
  transform: translateY(-2px);
}

.btn-hero-primary:active {
  transform: translateY(0);
}

.btn-hero-secondary {
  background: var(--btn-hero-secondary);
  color: var(--text-beige);
  border: 1px solid var(--btn-border);
  transition:
    background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-hero-secondary:hover {
  background: var(--btn-hero-secondary-hover);
  transform: translateY(-2px);
  border-color: var(--btn-hero-primary);
}

.btn-hero-secondary:active {
  transform: translateY(0);
}