html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #ddddcc;
}
#myDIV {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
}
#myDIV div {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}
#header-logo {
  height: 80px;
}
.item1 {
  grid-area: 1 / 1 / span 1 / span 4;
  background-color: #0f5a33 !important;
  height: 80px;
}
.item2 {
  grid-area: 2 / 1 / span 2 / span 3;
  display: flex; flex-direction: column;
}
.item6 {
  grid-area: 4 / 1 / span 1 / span 4;
  background-color: #0f5a33 !important;
  height: 10px;
}

@media (max-width: 600px) {
  .item1 {
    grid-area: 1 / 1 / span 1 / span 1;
    background-color: #0f5a33 !important;
    height: 80px;
  }
  .item2 {
    grid-area: 2 / 1 / span 1 / span 1;
    display: flex; flex-direction: column;
  }
  .item3 {
    grid-area: 3 / 1 / span 1 / span 1;
    display: flex; flex-direction: column;
  }
  .item4 {
    grid-area: 4 / 1 / span 1 / span 1;
    display: flex; flex-direction: column;
  }
  .item6 {
    grid-area: 5 / 1 / span 1 / span 1;
    background-color: #0f5a33 !important;
    height: 10px;
  }
}

.iframe iframe {
  width: 100%;
  height: 100%;
}

.iframe {
  width: 98%;
  height: 600px;
}