/* 基本排版設定 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Grid container */
.container {
  display: grid;
  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";
  height: 800px;
  gap: 10px;
}

/* 每個區域的樣式與對應 */
.header { grid-area: header; background: lightblue; text-align: center; }
.left   { grid-area: left; background: lightcoral; }
.main   { grid-area: main; background: lightgreen; }
.right  { grid-area: right; background: lightpink; }
.footer { grid-area: footer; background: lightgray; text-align: center; }

.header, .left, .main, .right, .footer {
  display: flex;
   justify-content: center;  /* 水平置中 */
    font-size: 20px;
}

/* adjustment-media query for displays below 800 pixels */
@media (max-width: 800px) {
  .container {
    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";
    height: 600px;
  }

  .left  { grid-column: span 3; }
  .main  { grid-column: span 9; }
}