.container {
  display: grid;
  gap: var(--Space-x3);
  grid-template-areas:
    "title"
    "form"
    "buttons";
}

.title {
  grid-area: title;
}

.welcome {
  color: var(--Text-Accent-Primary);
}

.name {
  color: var(--Text-Interactive-Default);
}

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

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

@media screen and (min-width: 768px) {
  .container {
    grid-template-areas:
      "title buttons"
      "form form";
  }

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

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