@media only screen and (max-width: 800px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    height: 100%;
    grid-gap: 10px;
  }

  .grid-item1 {
    background-image: url("../img/b&b/bnb_voor.JPG");
    background-size: cover;
    background-position: center;
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .grid-item2 {
    background-image: url("../img/b&b/image_tall3.jpeg");
    background-size: cover;
    background-position: center;
    grid-column: 2/2;
    grid-row: 1/2;
  }

  .grid-item3 {
    background-image: url("../img/b&b/koffie.JPG");
    background-size: cover;
    background-position: center;
    grid-column: 1/2;
    grid-row: 2/2;
  }

  .grid-item4 {
    background-image: url("../img/b&b/image_rect2.jpeg");
    background-size: cover;
    background-position: center;
    grid-column: 2/2;
    grid-row: 2/2;
  }
}

@media only screen and (min-width: 1201px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 100%;
    height: 100%;
    grid-gap: 10px;
  }

  .grid-item1 {
    background-image: url("../img/b&b/image_wide.JPG");
    background-size: cover;
    background-position: center;
    grid-column: 1/4;
    grid-row: 1/2;
  }

  .grid-item2 {
    background-image: url("../img/b&b/image_tall3.jpeg");
    background-size: cover;
    background-position: center;
    grid-column: 1/2;
    grid-row: 2/5;
  }

  .grid-item3 {
    background-image: url("../img/b&b/image_wide2.JPG");
    background-size: cover;
    background-position: center;
    grid-column: 1/5;
    grid-row: 5/5;
  }

  .grid-item4 {
    background-image: url("../img/b&b/image_rect2.jpeg");
    background-size: cover;
    background-position: center;
    grid-column: 2/4;
    grid-row: 2/5;
  }

  .grid-item5 {
    background-image: url("../img/fotos/selectie/IMG_9599_cut.JPG");
    background-size: cover;
    background-position: center;
    grid-column: 4/6;
    grid-row: 1/3;
  }

  .grid-item6 {
    background-image: url("../img/b&b/koffie.JPG");
    background-size: cover;
    background-position: center;
    grid-column: 4/5;
    grid-row: 3/5;
  }

  .grid-item7 {
    background-image: url("../img/b&b/image_tall2.jpeg");
    background-size: cover;
    background-position: center;
    grid-column: 5/6;
    grid-row: 3/6;
  }

  .grid-item8 {
    background-image: url("../img/b&b/uitzicht5.jpeg");
    background-size: cover;
    background-position: center;
    grid-column: 6/8;
    grid-row: 1/6;
  }
}