.item1 { grid-area: header; }
.item2 { grid-area: Images; }
.item3 { grid-area: left; }
.item4 { grid-area: midl;}
.item5 { grid-area: midr; }
.item6 { grid-area: right;}
.item7 { grid-area: footer;}

.grid-container {
  height: 100vh;
  display: grid;
  grid-template-areas:
    'header header header header'
    'Images Images Images Images'
    'left midl midr right'
    'left midl midr right'
    'left midl midr right'
    'left midl midr right'
    'left midl midr right'
    'footer footer footer footer';
  gap: 10px;
  padding: 10px;
  text-wrap: wrap;
  background-color: rgba(138, 43, 226, 0.8);
}

.devonianmap {
    width: 400px;
}

  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .protest-strike-regular {
    font-family: "Protest Strike", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .item1 {
    font-family: "Protest Strike", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .patua-one-regular {
    font-family: "Patua One", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .item2 {
    font-family: "Patua One", serif;
    font-weight: 200;
    font-style: normal;
    background-image: url("Devonian.webp");
    background-repeat: no-repeat;
    padding: 120px;
  }
  .item3 {
    font-family: "Patua One", serif;
    font-weight: 200;
    font-style: normal;
  }
  .item4 {
    font-family: "Patua One", serif;
    font-weight: 200;
    font-style: normal;
  }
  .item5 {
    font-family: "Patua One", serif;
    font-weight: 200;
    font-style: normal;
  }
  .item6 {
    font-family: "Patua One", serif;
    font-weight: 200;
    font-style: normal;
  }
  .item7 {
    font-family: "Patua One", serif;
    font-weight: 200;
    font-style: normal;
  }