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

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

.price {
  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
}

.checkBox {
  align-self: center;
  grid-area: checkbox;
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
}

.terms {
  grid-area: terms;
}

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

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