window.addEventListener('load', (event) => {

    const banners = document.querySelectorAll('.block-page-title-banner')

    function setBannerHeight(banner){
        if (window.matchMedia('(min-width: 62rem)').matches) {
            //get element top offset
            const bannerOffsetTop = banner.offsetTop
            //set block height
            banner.style.setProperty('--page-title-banner-img-height', `${window.innerHeight-bannerOffsetTop}px`)
        }
    }

    banners.forEach(banner => {
        setBannerHeight(banner)
    })

    window.addEventListener('resize', function(){
        banners.forEach(banner => {
            setBannerHeight(banner)
        })    
    })
    
})