.join {
  display: grid;
  justify-items: center;
  padding-top: clamp(16px, 8vh, 96px);
}

.join-card {
  display: grid;
  gap: 20px;
  width: min(100%, 440px);
}

.join-title {
  font-size: var(--text-xl);
}

.join-text {
  margin-top: -8px;
  color: var(--mist);
}

.join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.join-row {
  display: flex;
  gap: 8px;
}

.join-row .input {
  flex: 1;
  min-width: 0;
}

.join-row .button {
  flex: none;
}