.form {
  display: grid;
  gap: var(--Spacing-x1);
  padding: var(--Spacing-x3) 0px;
}

.container {
  display: grid;
  gap: var(--Spacing-x1);
  grid-template-columns: 1fr 1fr;
  width: min(100%, 600px);
}

.country,
.email,
.membershipNo,
.phone {
  grid-column: 1/-1;
}

.footer {
  display: grid;
  gap: var(--Spacing-x3);
  justify-items: flex-start;
  margin-top: var(--Spacing-x1);
}

@media screen and (min-width: 1367px) {
  .form {
    gap: var(--Spacing-x2);
    padding: var(--Spacing-x3) 0px;
  }

  .container {
    gap: var(--Spacing-x2);
    grid-template-columns: 1fr 1fr;
    width: min(100%, 600px);
  }

  .country,
  .email,
  .membershipNo,
  .phone {
    grid-column: 1/-1;
  }

  .footer {
    display: grid;
    gap: var(--Spacing-x3);
    justify-items: flex-start;
    margin-top: var(--Spacing-x1);
  }
}