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

.container {
  width: 90%;
  margin: 0 auto;
}

.item {
  background-color: #dfe6e9;
  padding: 1.5em;
  text-align: center;
  border: 1px solid #b2bec3;
}

#tasktwo .item {
  background-color: #b2bec3;
  padding: 1em;
  text-align: center;
  border: 1px solid #636e72;
}

.imgcontainer img {
  max-width: 100%;
}

/* TASK ONE : - DONE
  1.) Create 4 equal-width columns
  2.) Add 10px gap between rows and columns
  3.) Observe how grid items automatically place themselves 
  */

#taskone .grid {
  display: grid;
  /* four columns of equal size */
  grid-template-columns: repeat(4, 1fr);
  /* gap between both rows and columns */
  gap: 10px;
}

/* TASK TWO: - DONE 
Use the container with the class .grid to create a 3-column, 3-row grid layout. Each track (row and column) should be 100 pixels tall/wide.

There are three child elements inside the grid. Your goal is to manually place them using grid-column and grid-row:

Place item 1 at row 1, column 1

Place item 2 at row 1, column 2

Place item 3 so that it spans across row 1 and 2, and overlaps item 1 and 2 (e.g. grid-column: 1 / 3)

➤ Afterward, experiment with z-index or stacking order to see how overlapping items behave visually.

*/

/* i added coloured borders and also made box item 3 mostly opaque just for better visiblity on each of the box items */

#tasktwo .grid {
  display: grid;
  /* 3x3 grid, with each row and column as 100px */
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

#tasktwo .grid .item1 {
  grid-column: 1 / 2;
  /* shorthand for grid-column-start and grid-column-end */
  grid-row: 1 / 2;
  /* shorthand for grid-row-start and grid-row-end */
  border: 3px blue solid;
}

#tasktwo .grid .item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  border: 3px green solid;
  /*z-index: 1; - using z-index here would put box item 2 on top of box item 3 */ 
}

#tasktwo .grid .item3 {
  grid-column: 1 / 3;
  /*grid-row: 2 / 3; - leaving this as 2/3 makes box item three cover both columns on just row two */
  grid-row: 1/3;
  border: 1px red solid;
  opacity: 95%;
}


/* TASK THREE - DONE
The following layout was generated by an AI assistant using grid-template-areas, but it's not working as intended (see image  included on index.html for intended layout) 

Your goal is to:

Identify and fix the mistakes in the CSS.

Ensure that the layout correctly displays the following structure:

Header: spans all 3 columns
Nav: left column
Main: center and right columns
Footer: spans all 3 columns

*/

#taskthree .grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    /* edited the template areas: now header spans all three colums; nav is column 1; main is columns 2 and 3; and header spans all 3 columns */
    "header header header"
    "nav main main"
    "footer footer footer";
  gap: 10px;
  text-align: center;
}

#taskthree header {
  grid-area: header;
  background-color: #ffeaa7;
}

#taskthree nav {
  grid-area: nav;
  background-color: #74b9ff;
}

#taskthree main {
  grid-area: main;
  background-color: #55efc4;
}

#taskthree footer {
  grid-area: footer;
  background-color: #fab1a0;
}