body {
  background-color: #e6e6e6;
  color: black;
  font-family: Courier;
}

h1 {
  font-weight: bold;
  font-style: italic;
}

.dashed-box {
  border: 2px dashed black;
  padding: 10px; /* Optional: adds space between content and border */
}


.parent {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0px;
}

.nested-item {
  /* These items are laid out based on the .box1's grid, not the .wrapper's */
  padding: 1em;
  border: 0px solid black;
}

.box1 {
  grid-column: 1 / 4; /* This item spans all 3 parent columns */
  display: grid; /* This div is now also a grid container */
  grid-template-columns: repeat(3, 1fr); /* Nested grid has its own 3 columns */
}