html { font-size: 22px; }
body { padding: 1rem; }

.card {
  /*background-color: dodgerblue;*/
  color: #676767;
  padding: 1rem;
  background-color: #f1f1f1;
  height:auto;
  overflow: auto;
  text-align: center;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap:0.5rem;
}

@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));