body {
  background-color: #333;
  /* Dark grey background */
  color: #fff;
  /* White text color */
  font-family: Arial, sans-serif;
  padding: 10px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  grid-template-areas:
    "cell1 cell2"
    "cell3 cell4";
}

.cell {
  padding: 20px;
  border: 1px solid #fff;
}

.cell1 {
  grid-area: cell1;
}

.cell2 {
  grid-area: cell2;
}

.cell3 {
  grid-area: cell3;
}

.cell4 {
  grid-area: cell4;
}

/* Responsive design */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "cell1"
      "cell2"
      "cell3"
      "cell4";
  }
}