.cardContainer {
  align-self: flex-start;
  background-color: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
  border-radius: var(--Corner-radius-lg);
  display: grid;
  gap: var(--Spacing-x-one-and-half);
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
  grid-template-areas:
    "checkbox"
    "list"
    "login"
    "terms";
  width: min(100%, 600px);
}

.login {
  grid-area: login;
}

.checkBox {
  align-self: center;
  grid-area: checkbox;
}

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

.listItem {
  display: flex;
}

.terms {
  border-top: 1px solid var(--Base-Border-Normal);
  grid-area: terms;
  padding-top: var(--Spacing-x1);
}

@media screen and (min-width: 768px) {
  .cardContainer {
    grid-template-columns: 1fr auto;
    gap: var(--Spacing-x2);
    grid-template-areas:
      "checkbox login"
      "list list"
      "terms terms";
  }
  .list {
    display: flex;
    gap: var(--Spacing-x1);
  }
}