Layering CSS for different navigation menu adjustments on desktop and on mobile

Hi, I'm looking for a way to layer CSS to allow for custom menus on desktop and on mobile. Currently, my desktop menu is set up with this:

.header-title-logo a:after {
    content: "Client Name To Go Here";
    display: inline-block;
    font-size: 36px;
    font-family: Poppins;
    color: black;
    text-align: center;
    vertical-align:middle;
    font-weight:400;
    padding-left: 20px;
}

However, this sizing does not work for mobile. The text overruns the menu and spills onto the site. I know that there are some simple standalone fixes for the mobile menu font size but they don't seem to work with this (or I'm doing it wrong - this is the first time I've really used CSS).

Is there a way to carry over the logic of the above CSS but create a separate styling for mobile?

Hi. Can you share site url? We can help easier