/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px;
}

.card h2,
.card h3 {
  margin-bottom: 12px;
}

.card p {
  color: var(--color-text-secondary);
}

.card p + p {
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Interactive Cards
   -------------------------------------------------------------------------- */

.card-interactive {
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.card-interactive:hover {
  border-color: rgba(45, 212, 191, 0.45);
  transform: translateY(-3px);
}