/* EXAMPLE 1 */
body {
  padding: 0;
  margin: 0;
}

.container {
  height: 100vh;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 1fr;
}

.item {
  font-size: 5rem;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: blueviolet;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* EXAMPLE 2 */
.second-item {
  font-size: 5rem;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: blueviolet;
  display: flex;
  align-items: center;
  justify-content: center;
}

.second-cowboy {
  background-color: #00b9ff;
  grid-column: span 2;
}

.second-astronaut {
  background-color: #03989e;
  order: 1;
  grid-column: span 2;
}

/* EXAMPLE 3 */
.third-item {
  font-size: 5rem;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: blueviolet;
  display: flex;
  align-items: center;
  justify-content: center;
}

.third-cowboy {
  background-color: #00b9ff;
  grid-column: span 2;
}

.third-astronaut {
  background-color: #03989e;
  grid-area: 2 / 1 / 3 / 3;
}

.third-book {
  background-color: #e58331;
  grid-area: 1 / 3 / 3 / 4;
  /* 
      or
      grid-area: 1 / 3 / -1 / -1 
      
      or
      grid-row: span 2;
      */
}