/* TODOs:
  1) Make .gallery use CSS Grid.
  2) Add spacing between cards using gap.
  3) Default layout: 2 equal-width columns.
  4) At screen widths ≥1024px, change to 4 columns.
*/
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  background: #fafafa;
  line-height: 1.6;
}
.gallery {
  /* Your grid styles here */
}
.card {
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  font-weight: 600;
}
@media (min-width: 1024px) {
  /* Adjust the grid for larger screens */
}