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

.formWrapper,
.userInfo,
.password {
  display: grid;
  gap: var(--Space-x3);
}

.container,
.terms,
.personalization {
  display: grid;
  gap: var(--Space-x2);
}

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

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

.personalizationMoreInfo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--Space-x2);
}
.personalizationButton {
  width: fit-content;
}

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

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

  .additional {
    grid-template-columns: 2fr 5fr;
    grid-template-areas:
      "zip country"
      "email email"
      "phone phone";

    & > div:nth-child(1) {
      grid-area: zip;
    }
    & > div:nth-child(2) {
      grid-area: country;
    }
    & > div:nth-child(3) {
      grid-area: email;
    }
    & > div:nth-child(4) {
      grid-area: phone;
    }
  }

  .signUpButton {
    width: fit-content;
  }
}