#overmijBlock {
  display: grid;
  grid-template-columns: 12fr;
  grid-template-areas:
    "titel"
    "vrijetijd"
    "foto"
    "studie"
    "youtube"
    "video";
  gap: 50px;
}
#titeltje {
  grid-area: titel;
}
#vrijetijd {
  grid-area: vrijetijd;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#parijs {
  grid-area: foto;
}
#parijs img {
  width: calc(100vw - 150px);
}
#studie {
  grid-area: studie;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#youtube {
  grid-area: youtube;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#video {
  grid-area: video;
  height: 100%;
}
#video iframe {
  width: calc(100vw - 60px);
  height: 200px;
}

@media screen and (min-width: 768px) {
  #overmijBlock {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-template-areas:
      "titel  ."
      "vrijetijd foto"
      "studie studie"
      "youtube youtube"
      "video video";
    gap: 60px;
  }

  #titeltje {
    grid-area: titel;
  }
  #vrijetijd {
    grid-area: vrijetijd;
  }
  #parijs {
    grid-area: foto;
  }
  #parijs img {
    width: 100%;
  }
  #studie {
    grid-area: studie;
  }
  #youtube {
    grid-area: youtube;
  }
  #video {
    grid-area: video;
    height: 315px;
    width: 560px;
  }
  #video iframe {
    width: 100%;
    height: 100%;
  }
  article {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  #overmijBlock {
    display: grid;
    grid-template-columns: 6fr 3fr 3fr;
    grid-template-areas:
      "titel titel foto"
      "vrijetijd vrijetijd foto"
      "studie studie foto"
      "youtube video video";
    gap: 100px;
  }
  #video {
    height: 315px;
    width: 560px;
    justify-self: end;
  }
  #video iframe {
    width: 100%;
    height: 100%;
  }
  article p {
    width: 90%;
  }
}