.nf-form {
  display: grid;
  gap: var(--nf-space-12);
  width: min(100%, var(--nf-content-width));
}

.nf-form-grid {
  display: grid;
  gap: var(--nf-space-12);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.nf-field,
.nf-form textarea,
.nf-form select {
  width: 100%;
  min-height: 44px;
  border-radius: var(--nf-radius-12);
  border: var(--nf-border-strong);
  background: var(--nf-surface-600);
  color: inherit;
  padding: 0 0.875rem;
  font: inherit;
  transition:
    border-color var(--nf-duration-base) ease,
    box-shadow var(--nf-duration-base) ease,
    background-color var(--nf-duration-base) ease;
}

.nf-form textarea {
  min-height: 120px;
  padding: 0.875rem;
  resize: vertical;
}

.nf-field:focus,
.nf-form textarea:focus,
.nf-form select:focus {
  outline: none;
  border-color: rgba(0, 234, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 234, 255, 0.12);
}

@media (max-width: 720px) {
  .nf-form {
    width: 100%;
  }
}