El en HTML se agregó un **div (gallery)** que va a contener todas las imágenes o sea los `ul` con sus `li` como también añadí sus respectivas clases (Cambie los IDs por clases) que me ayudaran a gestionarlo el `js`.

***HTML***

    <div class="gallery">
            <ul class="thumbItems">
                <li data-wow-delay="0.4s">
                    <a href="#" id="open">
                        <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."/></div>
                    </a>    
                        <span class="portfolio-item-title">Lorem ipsum.</span>
                </li>
                <li data-wow-delay="0.4s">
                    <a href="#" id="open">
                        <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."/></div>
                    </a>    
                        <span class="portfolio-item-title">Lorem ipsum.</span>
                </li>
            </ul> 
            <div class="modal-container" id="modal_container">
                <div class="centrate">
                  <img title="modal" src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" />
                  <p style="color: aliceblue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit.</p>
                  <button id="close" href="#">Cerrar</button>
                </div>
              </div>  
        </div>


***JavaScript***

Si vez solo capture la clase de `gallery` que es el div que contiene las imágenes y utilice `querySelectorAll` porque son clases y no getElementById.

Luego como es un `querySelectorAll` este devuelve un objeto similar a una matriz denominado lista de nodos. Luego esa lista de nodos la recorro con un `forEach` y capturo el evento **click** de cada imagen.

***querySelector:***

> Retorna el primer elemento que cumpla con el criterio dado. Puede ser
> invocada sobre el document o sobre algún elemento. En caso de usarse
> sobre un elemento, las búsqueda se limita a los hijos de ese elemento.
> Si la búsqueda no encuentra nada, retorna null.

***querySelectorAll:***

> Retorna todos los elementos que cumplan con el criterio dado. Al igual
> que querySelector puede ser invocada sobre el document o sobre algún
> elemento. Siempre retorna un NodeList, el cual no es una array con
> todas las de la ley (map, reduce, indexOf, etc), pero pude convertirse
> en uno, con facilidad.


    const gallery = document.querySelectorAll(".thumbItems")
        const close = document.getElementById('close');
    
            gallery.forEach((item) => {
                item.addEventListener("click", function() {
                    modal_container.classList.add('show');
                });
            })
    
        close.addEventListener('click', () => {
            modal_container.classList.remove('show');
        });

**CSS** (Se quedo igual)

 

     .modal-container{
                background: rgba(0,0,0,0.75);
                align-items: center;
                justify-content: center;
                position: fixed;
                pointer-events: none;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 100vh;
                width: 100vw;
                opacity: 0;
                z-index: 2;
                vertical-align: middle;
                }  
    
            .show{
                pointer-events: auto;
                opacity: 1;
                z-index: 2;
            }
               
            .centrate{
                margin: 0;
                position: absolute;
                top: 50%; left: 50%;
                transform: translate(-50%, -50%);
            }