Как сверстать такой блок на GRID?

.grid-container {
  display: inline-grid;
  grid-template-columns: repeat(4, 250px);
  grid-template-rows: 250px 250px;
  grid-gap: 5px 5px;
  grid-template-areas:
    "watch watch tour tour"
    "watch watch tips movies";
  padding: 5px;
  background-color: #f0f1f5;
  box-shadow: 0 5px 15px -5px #000;
}

.grid-container div {
  background-size: 1080px 557px;
  background-image: url(https://i.stack.imgur.com/XWYw8.jpg);
}
.watch  { grid-area: watch;  background-position: -25px -15px;   }
.tour   { grid-area: tour;   background-position: -538px -15px;  }
.tips   { grid-area: tips;   background-position: -538px -272px; }
.movies { grid-area: movies; background-position: -795px -272px; }

<div class="grid-container">
  <div class="watch"></div>
  <div class="tour"></div>
  <div class="tips"></div>
  <div class="movies"></div>
</div>