How can I set CSS styles in JavaScript?

Question

I have the following JavaScript code:

const cardWrapper = document.querySelectorAll('.card__wrapper');

cardWrapper.forEach((cont) => {
    const cards = cont.querySelectorAll('.card');
    const cardBg = cont.querySelectorAll('.card-bg');
    const cardText = cont.querySelectorAll('.card__text');
    
    cardBg.style.transition = 'all .3s ease-out';
    cardText.style.transition = 'all .3s ease-out';
  
    cards.forEach((el, i) => {
        el.addEventListener('mouseenter', () => {
            cardBg[i].style.maxHeight = '100%';
            cardText[i].style.maxHeight = '100%';
        });

        el.addEventListener('mouseleave', () => {
            cardBg[i].style.maxHeight = '56px';
            cardText[i].style.maxHeight = '56px';
        });
    });
});

I need to take these 2 styles out of events and leave them in the JS code, not put them in the CSS file.

cardBg.style.transition = 'all .3s ease-out';
cardText.style.transition = 'all .3s ease-out';

The way I did in the code above doesn't work. What's wrong with it?