#projectDetailsBlock {
  display: grid;
  grid-template-columns: 12fr;
  grid-template-areas:
    "nummer"
    "naam"
    "foto1"
    "info"
    "foto2"
    "foto3";
  gap: 50px;
}
#nummer {
  grid-area: nummer;
}
#naam {
  grid-area: naam;
  width: 85%;
}
#foto1 {
  grid-area: foto1;
}

figure img {
  width: calc(100vw - 60px);
  border-radius: 15px;
  box-shadow: 2px 2px 2px 1px #e65c4f;
}
#info {
  grid-area: info;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.url {
  width: calc(100vw - 60px);
  display: block;
  overflow-wrap: break-word;
  margin: 20px 0;
}
#foto2 {
  grid-area: foto2;
}
#foto3 {
  grid-area: foto3;
}
h4 {
  margin-bottom: 10px;
}
#video {
  height: 100%;
}
#video iframe {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  #projectDetailsBlock {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-template-areas:
      "nummer nummer"
      "naam naam "
      "info info"
      "foto1 foto2";
    gap: 60px;
  }
  #nummer {
    grid-area: nummer;
  }
  #naam {
    grid-area: naam;
  }
  #foto1 {
    grid-area: foto1;
  }
  figure img {
    width: calc(50vw - 100px);
  }
  figure {
    width: 100%;
  }
  #info {
    grid-area: info;
    width: 80%;
  }

  article {
    width: 100%;
  }
  p {
    width: 100%;
  }
  .url {
    width: calc(100vw - 100px);
  }
  #video {
    grid-area: foto2;
  }
}
@media screen and (min-width: 1024px) {
  figure img {
    width: calc(50vw - 160px);
  }
  #info {
    width: 60%;
  }
  .url {
    width: calc(100vw - 160px);
  }
}