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

.title {
  grid-area: title;
}

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

.btnContainer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--Spacing-x1);
  grid-area: buttons;
}

@media screen and (min-width: 768px) {
  .form {
    grid-template-columns: 1fr;
  }

  .btnContainer {
    align-self: center;
    flex-direction: row;
    gap: var(--Spacing-x2);
    justify-self: flex-end;
  }
}

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

.container {
  gap: var(--Spacing-x2);
}

@media (min-width: 768px) {
  .divider {
    display: none;
  }
}