When screen real estate is needed for content but there`s a little room for imagery, use the slim hero modifier.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<header class="c-hero c-hero--slim c-hero--overlay">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/site/hero/slim/1-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slim/1-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slim/1-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slim/1-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slim/1-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slim/1-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/site/hero/slim/1-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</div>
<div class="c-hero__body">
<div class="c-hero__body-description">
<h1 class="c-hero-heading | u-heading u-kilo">Hero Title</h1>
<p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</header>