lab/css/lab13/submission/group_A/lab13_gpAstyle.css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr 1fr;
  grid-gap: 20px;
  height: 100vh;
}

.grid-container2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 4fr;
  grid-gap: 20px;
  height: 100vh;
}

.grid-container3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr 1fr;
  grid-gap: 20px;
  height: 100vh;
}

h1{
  font-family: 'Courier New', Courier, monospace;
}

.header1 {
  grid-column: 1 / 4;
  background-color: #333333;
  color: #ffffff;
  padding: 20px;
}

.header2 {
  grid-column: 1 / span 3;
  background-color: #62349a;
  color: #ffffff;
  padding: 20px;
  border-color: black;
  border-style: solid;
}

.m1main {
  grid-column: 1 / 2;
  background-color: #b76c6c;
  padding: 20px;
  border-color: black;
  border-style: solid;
}

.m1sidebar {
  grid-column: 4 / 2;
  background-color: #6791d1;
  padding: 20px;
  border-color: black;
  border-style: solid;
}

.m1footer {
  grid-column: 1 / 4;
  background-color: #f1fcab;
  color: #ffffff;
  padding: 20px;
  border-color: black;
  border-style: solid;
}

.m2red{
  background-color: lightcoral;
  padding: 20px;
  border-color: #333333;
  border-style: solid;
}
.m2green{
  background-color: lightgreen;
  padding: 20px;
  border-color: #333333;
  border-style: solid;
}
.m2mustard{
  background-color: goldenrod;
  padding: 20px;
  border-color: #333333;
  border-style: solid;
}

.m3green{
  background-color: green;
  grid-column: 1 / span 3;
  padding: 20px;
  border-color: black;
  border-style: solid;
}

.m3image{
  grid-row: 3;
  background-image: url(https://hips.hearstapps.com/hmg-prod/images/cherry-blossom-facts-1578344148.jpg?crop=1.00xw:0.754xh;0,0.164xh&resize=1200:*)
}

.m3blue{
  background-color: lightblue;
  padding: 20px;
  border-color: black;
  border-style: solid;
}