A product logo can be displayed using an additional theme class:
mzp-t-product-firefox
mzp-t-product-beta
mzp-t-product-developer
mzp-t-product-nightly
mzp-t-product-focus
mzp-t-product-mozilla
mzp-t-product-vpn
mzp-t-product-pocket
<section class="mzp-c-hero mzp-t-product-firefox">
<div class="mzp-l-content">
<div class="mzp-c-hero-body">
<h1 class="mzp-c-hero-title">A Headline With 30 Characters</h1>
<p class="mzp-c-hero-tagline">A short tagline.</p>
<div class="mzp-c-hero-desc">
<p>A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
</div>
<p class="mzp-c-hero-cta">
<button class="mzp-c-button mzp-t-product mzp-t-lg" type="button">Call to Action</button>
</p>
</div>
</div>
</section>