.cardContainer {
  align-self: flex-start;
  background-color: orchid;
  color: white;
  border-radius: var(--Corner-radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
  grid-template-areas:
    "price login"
    "checkbox checkbox"
    "terms terms";
  width: min(100%, 696px);
}

.priceContainer {
  grid-area: price;
  margin-bottom: var(--Space-x1);
}

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

.login {
  grid-area: login;
  align-self: center;
  justify-self: end;
}

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

.terms {
  grid-area: terms;
}

@media screen and (min-width: 768px) {
  .cardContainer {
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: var(--Space-x3);
    grid-template-areas:
      "price checkbox login"
      "terms terms terms";
  }

  .priceContainer {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
}