body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  display: grid;
  height: 800px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px auto 50px;
  grid-template-areas:
    "header header header header header header header header header header header header"
    "left left main main main main main main main main right right"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
}

/* ----- Section Styles ----- */
header {
  grid-area: header;
  background-color: #000;
  color: white;
  text-align: center;
  line-height: 50px;
}

.left {
  grid-area: left;
  background-color: #333;
  color: white;
  padding: 20px;
}

main {
  grid-area: main;
  background-color: #555;
  color: white;
  padding: 20px;
}

.right {
  grid-area: right;
  background-color: #333;
  color: white;
  padding: 20px;
}

footer {
  grid-area: footer;
  background-color: #000;
  color: white;
  text-align: center;
  line-height: 50px;
}

/* ✅ Media Query (below 800px wide) */
@media (max-width: 800px) {
  .container {
    height: 600px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px auto auto 50px;

    /* four total rows */
    grid-template-areas:
      "header header header header header header header header header header header header"
      "left left left main main main main main main main main main"
      "right right right right right right right right right right right right"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }
}