.form {
  display: grid;
  gap: var(--Spacing-x5);
  grid-area: form;
}

.title {
  grid-area: title;
}

.formWrapper {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x3);
}

.userInfo,
.password,
.terms {
  align-self: flex-start;
  display: grid;
  gap: var(--Spacing-x2);
}

.container {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x3);
}

.nameInputs {
  display: grid;
  gap: var(--Spacing-x2);
}

.dateField {
  display: grid;
  gap: var(--Spacing-x1);
}

@media screen and (min-width: 1367px) {
  .formWrapper {
    gap: var(--Spacing-x5);
  }

  .nameInputs {
    grid-template-columns: 1fr 1fr;
  }

  .signUpButton {
    width: fit-content;
  }
}