Mi codigo funciona bien sin necesidad de salto de linea <Br>

const hmtl = document.querySelector('html') const botonCorto = document.querySelector('.app__card-button--corto') const botonLargo = document.querySelector('.app__card-button--largo') const botonEnfoque = document.querySelector('.app__card-button--enfoque') const banner = document.querySelector('.app__image') const titulo = document.querySelector('.app__title')

botonCorto.addEventListener('click', ()=> { cambiarContexto('descanso-corto') })

botonLargo.addEventListener('click', ()=> { cambiarContexto('descanso-largo') })

botonEnfoque.addEventListener('click', ()=> { cambiarContexto('enfoque') })

function cambiarContexto(contexto){ hmtl.setAttribute('data-contexto',contexto) banner.setAttribute('src',./imagenes/${contexto}.png)

switch (contexto) {
    case "enfoque":
        titulo.innerHTML = `
        Optimiza tu productividad,
            <strong class="app__title-strong">sumérgete en lo que importa.</strong>
        `
            break;
    case "descanso-corto":
        titulo.innerHTML = `
        ¿Que tal tomar un respiro?
            <strong class="app__title-strong">¡Has una pausa corta!.</strong> </br>
        `
            break;   
    case "descanso-largo":
        titulo.innerHTML = `
        Hora de volver a la superficie<br>
            <strong class="app__title-strong">¡Has una pausa larga!.</strong> </br>
        `
            break;  
    default:
        break;
}

}