Ajuda em uma tentativa diferente

Tentei fazer de uma outra forma para treinar meus conhecimentos, mas apenas a primeira parte do texto se altera, a segunda desaparece. Alguém sabe me dizer o porque?

const html = document.querySelector("html");
const focoBt = document.querySelector(".app__card-button--foco");
const curtoBt = document.querySelector(".app__card-button--curto");
const longoBt = document.querySelector(".app__card-button--longo");
const banner = document.querySelector(".app__image");

const titulo1 = document.querySelector(".app__title");
const titulo2 = document.querySelector(".app__title-strong") ;

function alterarTexto (valor1, valor2) {
    titulo1.textContent = valor1;
    titulo2.textContent = valor2; 
}

function alterarContexto (contexto) {
    html.setAttribute("data-contexto", contexto);
    banner.setAttribute("src", `/imagens/${contexto}.png`);
}

focoBt.addEventListener("click", () => {
    alterarContexto("foco");
    alterarTexto("Otimize sua produtividade,", "mergulhe no que importa.")
})

curtoBt.addEventListener("click", () => {
    alterarContexto("descanso-curto");
    alterarTexto("Que tal dar uma respirada?", "Faça uma pausa curta!")
})

longoBt.addEventListener("click", () => {
    alterarContexto("descanso-longo");
    alterarTexto("Hora de voltar à superfície.", "Faça uma pausa longa.")
})