function WidthChange(mq) {
        if (!mq.matches && window.innerHeight > 250) {
            card1.style.marginTop = '45%';
            card2.style.marginTop = '45%';
            card3.style.marginTop = '45%';
            card1.appendChild(card1Image);
            card2.appendChild(card2Image);
            card3.appendChild(card3Image);
        }
        else {
            card1.style.marginTop = '30%';
            card2.style.marginTop = '30%';
            card3.style.marginTop = '30%';
            card1.appendChild(card1Image);
            card2.appendChild(card2Image);
            card3.appendChild(card3Image);
        }
    }
// media query change to handle narrower screens
media query change to handle narrower screens
media query change to handle narrower screens
function WidthChange(mq) {
        if (!mq.matches && window.innerHeight > 250) {
            card1.style.marginTop = '45%';
            card2.style.marginTop = '45%';
            card3.style.marginTop = '45%';
            card1.appendChild(card1Image);
            card2.appendChild(card2Image);
            card3.appendChild(card3Image);
        }
        else {
            card1.style.marginTop = '30%';
            card2.style.marginTop = '30%';
            card3.style.marginTop = '30%';
            card1.appendChild(card1Image);
            card2.appendChild(card2Image);
            card3.appendChild(card3Image);
        }
    }
function WidthChange ( mq ) { if ( ! mq . matches && window . innerHeight > 250 ) { card1 . style . marginTop = '45%' ; card2 . style . marginTop = '45%' ; card3 . style . marginTop = '45%' ; card1 . appendChild ( card1Image ) ; card2 . appendChild ( card2Image ) ; card3 . appendChild ( card3Image ) ; } else { card1 . style . marginTop = '30%' ; card2 . style . marginTop = '30%' ; card3 . style . marginTop = '30%' ; card1 . appendChild ( card1Image ) ; card2 . appendChild ( card2Image ) ; card3 . appendChild ( card3Image ) ; } }
media query change to handle narrower screens
media query change to handle narrower screens