Customizing Portfolio Titles Appearance

Site URL: https://metgal.art/

In order to get our portfolio (RESULTS page) hover over titles to appear as we want, I included some html. I thought by editng the SEO descriptions they wouldn't show up when searched in Google, but they do in some areas (like the general portfolio page). Can anyone help include CSS to help format the titles how we have them so I don't have to worry how they display in Google? Images to help illustrate below. 

Hi. If you use Business Plan, we can replace <br><p> with some other characters, example: #, |,.. It will still show up on GG (#, | or...), but it will look better than html tag.

Do you use Personal or Business Plan?

What if you wrote the titles in plain text (without the HTML) for SEO purposes, then had a script on the RESULTS page convert it to the way you currently have it? I'm not sure if that's the best idea, but it's another idea. For example, your title would be "GENSLER - AUSTIN, TX" (notice it's hyphen separated), then script added to the RESULTS code injection would say to split it in half at the hyphen and add your other code when the page is loaded.
 

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll("h3").forEach(function (el, ind) {
        // this line below says to split it at the hyphen...
        var [place, location] = el.innerHTML.split("-");
        el.innerHTML = el.innerHTML.replace(location, "<p style='font-size:20px; line-height:0.1; transition-timing-function:ease; transition-duration: 1.5s; transition-delay: 0.391837s;' class='preFade fadeIn'>" + location + "</p>");
        el.innerHTML = el.innerHTML.replace(" -", "<br>");
    });
});

Or, let's say you'd prefer your titles to use two forward-slashes for SEO, like "GENSLER // AUSTIN, TX". I'll write that code too so you can compare the changes on lines 4 and 6.  

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll("h3").forEach(function (el, ind) {
        // this line below says to split it at the two forward-slashes...
        var [place, location] = el.innerHTML.split("//");
        el.innerHTML = el.innerHTML.replace(location, "<p style='font-size:20px; line-height:0.1; transition-timing-function:ease; transition-duration: 1.5s; transition-delay: 0.391837s;' class='preFade fadeIn'>" + location + "</p>");
        el.innerHTML = el.innerHTML.replace(" //", "<br>");
    });
});