.item1 { grid-area: space1; }
.item2 { grid-area: menu; }
.item3 { grid-area: header; }
.item4 { grid-area: main; }
.item5 {grid-area: space2; }


.item4 {
  max-height: 10px;
  width: 150px;
  max-width: 150px;
}

details {
  border: 0.1rem solid black; 
  border-radius: 0.5em;
  overflow: hidden;
  margin: 1em;
  }
  [open] > summary::after {
  transform: rotate(-180deg);
  }
  :details-content {
  max-block-size: 0;
  opacity: 0;
  /* animation */
  transition:
    opacity 0.3s,
    max-block-size 0.2s linear,
    content-visibility 0.2s linear; /* fine tune the timings */
  transition-behavior: allow-discrete;
  overflow: hidden;
  }
  [open]::details-content {
  opacity: 1;
  max-block-size: 10em; /* just an example */
  /* max-block-size has to be hard-coded 
  for the animation to work (unfortunately) */
  }


 summary {
  display: flex; 
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0.7em;
  transition: background-color 0.3s;
  }
  ::after {
  content: "";
  transition: 0.3s;
  border-block-start: 0.4em solid black;
  border-inline: 0.25em solid transparent;
  }
  :-webkit-details-marker {
  display: none;
  }

.grid-container {
  width: 550px;
  height: 450px;
  margin-top: 30px;
  margin-left: 30px;
  margin-right: 30px;
  border: outset;
  border-color: dimgrey;
  border-width: 0.15rem;
  display: grid;
  grid-template:
    ' left header header header space space '
    ' left title title title title title '
    ' left main main main main main '
    ' menu main main main main main '
    ' space2 main main main main main'
    ' space2 main main main main main';
  grid-gap: 4.5px;
  justify-content: center;
  background-color: #B8B8B8;
  padding: 50px 50px;
}
.grid-container > div {
  margin-left: 4px;
  text-align: left;
  padding: 7px 7px;
  font-size: 10px;
  border-style: outset;
  border: inset grey;
  border-width: 0.1rem;
}