Does displaying none on duplicate content affect SEO/Semantics?

Does Display: none on duplicate content affect SEO/Semantics?

Suppose you’re building a mobile-first, responsive site. At smaller breakpoints, you’ve opted to show your page’s heading tagline (<h1>) in the main hero banner. However, later, you’d like to display a company logo in that same spot, and display your tagline in a sub banner. For example:

<!-- Assuming following markup -->
<header class="hero-banner">
    <h1 class="hide-on-lg">Company Tagline</h1>
    <img src="..." class="show-on-lg" />
</header>
<div class="subhead-banner">
    <h1 class="show-on-lg">Company Tagline</h1>
</div>

…with the following CSS:

.hide-on-lg {
    display: block;
}
.show-on-lg {
    display: none;
}
@media (min-width: 1200px) {
    .show-on-lg {
        display: block;
    }
    .hide-on-lg {
        display: none;
    }
}

The semantic rule is that you should never have more than a single h1 on a page, so my question is this:

Does having that duplicate content affect SEO, or violate semantics, if only one variation is ever actually visible?