Endpoint de detalles de una película

Recuerden que si quieren optimizar aun más el código y no tener que crear un evento por cada película, pueden crear un sólo evento en la sección y con el e.target delegar el evento al nodo que quieren, ¿pero cmo detecto el id o la url de la imagen?, muy sencillo, usar los dataset para guardar esos datos en el html al momento de cargar los items don el módulo navigations.
.
Adjunto mi aporte con mi repositorio en el commit de la clase:
Mi repositorio

Solución al string vacío en el form

searchFormBtn.addEventListener('click', 
e => searchFormInput.value !== "" ? location.hash = 'search=' + searchFormInput.value  : e.preventDefault())

Para los puristas del CSS, recomiendo agregar un reset inicial a las imágenes de estas propiedades:

img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.
Existe también el object-fit: cover; que es más resumido pero no es compatible con IE.
.
El modificador header-container--long siempre al final de todos los estilos de esa sección, y eliminar los estilos que ya javascript los coloca. Además esta tenía una propiedad de background-size: cover !import;, si son muy maniáticos con el no colcoar el !import, pues en este caso era necesario ya que nunca CSS encontrará una especificdad de contenedor de imagen cuando dentro hay otros elementos como h1 o p. La solución es eliminar esa propiedad y agregarla internamente desde el código javascript.

.header-container--long {
    height: 480px;
    position: fixed;
    top: 0;
    width: 100%;
}

.
JS

	headerSection.style.background = `
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.35) 19.27%,
                rgba(0, 0, 0, 0) 29.17%
            ),
            url(${movieImgUrl})
        `;
        headerSection.style.backgroundPosition = 'center';
        headerSection.style.backgroundRepeat = 'no-repeat';
        headerSection.style.backgroundSize = 'cover';

.
Mi repositorio en este fix