/* Grid Layout */

.item-header { grid-area: header; }
.item-menu { grid-area: menu; }
.item-main { grid-area: main; }
.item-right { grid-area: right; }
.item-footer { grid-area: footer; }

.grid-container1 {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: rgb(253, 157, 32);
  padding: 10px;
}

.grid-container1 > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

/* Grid Elements */

.grid-container2 {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: rgb(253, 157, 32);
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

/* Grid Row Gap */

.grid-container3 {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: rgb(253, 157, 32);
  padding: 10px;
}

.grid-item-gap {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

/* column gap */

.grid-container4 {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: rgb(253, 157, 32);
  padding: 10px;
}

.grid-item-column-gap {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

/* Grid Lines */
.grid-container5 {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: rgb(253, 157, 32);
  padding: 10px;
}

.grid-container5 > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}