.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);
  width: min(100%, 600px);
}

.checkBox {
  align-self: center;
}

.list {
  display: flex;
  gap: var(--Spacing-x1);
  flex-direction: column;
}

.listItem {
  display: flex;
}

@media screen and (min-width: 768px) {
  .cardContainer {
    gap: var(--Spacing-x1);
  }

  .list {
    flex-direction: row;
    flex-wrap: wrap;
  }
}