.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px auto auto auto;
  gap: 0px 0px;
  grid-template-areas:
    "Header-Image Maincontent Maincontent"
    "Navigation Maincontent Maincontent"
    "Footer-Image Maincontent Maincontent"
    "Footer Footer Footer";
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "Header-Image"
      "Navigation"
      "Maincontent"
      "Footer"
      "Footer-Image";
  }
}

.Header-Image { grid-area: Header-Image; }
.Navigation { grid-area: Navigation; }
.Footer { grid-area: Footer; }
.Maincontent { grid-area: Maincontent; }
.Footer-Image { grid-area: Footer-Image; }