/* @media (max-width: 1200px) {
  .grid-container {
    grid-template-areas:
      "a b c"
      "a d f"
      "e d"
      "e ."
      "f f";
    }
} */



@media (max-width: 1200px) {
    .grid-container {
      /* Two columns, and no empty cell: the old "e ." row left a hole in the layout. */
      grid-template-areas:
        "a d"
        "b c"
        "e e";
      }
  }

  @media (max-width: 800px) {
    .grid-container {
      grid-template-areas:
        "a"
        "d"
        "b"
        "c"
        "e";
    }
  }