Targeting only 1 event in DOM
I can give you two ways to approach this: via JavaScript or CSS.
JavaScript
You can use the .closest() method of the HTMLElement interface. You need to pass it a CSS selector, and it will find you the closest DOM ancestor of the element that matches the given selector, or null if no such ancestor was found.
In this case, you could use it like this:
function openModal(e) {
  if (e.target.closest('.project-box__picture-box')) {
    modalEl.classList.add('open');
  }
}

(full method reference here)
CSS
The other option is to use the pointer-events CSS property. If you set this to none on all elements inside the clickable box, then those elements will not be allowed to be the targets of mouse events; instead, the target will be the closest ancestor that has pointer events enabled.
In this case, you'd need to add this CSS:
.project-box__picture-box * {
  pointer-events: none;
}

And this JS:
function openModal(e) {
  if (e.target.classList.contains('project-box__picture-box')) {
    modalEl.classList.add('open');
  }
}

(full property reference here)