/* CSS Document */
html { font-size: 21px; font-family: Helvetica, Arial, "sans-serif" }
body { padding: 1rem; text-align: center;}

.card {
  	background-color: white;
}
h1 {
	font-size: 42px;
	margin-buttom: 20px;
}
.cards {
  	max-width: 900px;
  	margin: 0 auto;
  	display: grid;
  	grid-gap: 2rem;
	text-align: center;
}

img {
    max-width: 100%;
    max-height: 100%;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(1, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}