h2 {
  margin: 5px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
  grid-template-areas: 
    "header header header header"
    "main   main   main   sidebar1"
    "main   main   main   sidebar1"
    "main   main   main   sidebar2"
    "footer footer footer footer";
  gap: 5px;
  background: lightgray;
  min-height: 100vh;
  font-size: 30px;
  width: 100%;
}

#box1 {
  background: var(--default-accent-green);
  grid-area: header;
}

#box2 {
  background: var(--default-accent-yellow);
  grid-area: main;
  border: 1px solid black;
  display: grid;
  grid-template-areas: 
  ".      .      ."
  "Top    Top    Right"
  "Top    Top    Right"
  "Bottom Bottom Right"
  "Bottom Bottom Right";
}

#para1 {
  background: lightgray;
  grid-area: Top;
}

#para2 {
  background: gray;
  grid-area: Bottom;
}

#para3 {
  background: darkgray;
  grid-area: Right;
}

#box3 {
  background: var(--default-accent-pink);
  grid-area: sidebar1;
}

#box4 {
  background: var(--default-accent-orange);
  grid-area: sidebar2;
}

#box5 {
  background: var(--default-accent-blue);
  grid-area: footer;
}