<header class="c-hero c-hero--header">
    <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                <a class="c-link-bare" href="#link_example">
                    Link
                    <span aria-hidden="true">→</span>
                </a>
            </p>
        </div>
    </div>
</header>

<header class="c-hero c-hero--header">
    <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                <a class="c-link-bare" href="#link_example">
                    Link
                    <span aria-hidden="true">→</span>
                </a>
            </p>
        </div>
        <div class="c-hero__body-actions">
            <a class="c-btn c-btn--primary" href="#hero_btn_1">Button</a>
            <a class="c-btn c-btn--secondary" href="#hero_btn_2">Button</a>
        </div>
    </div>
</header>

<header class="c-hero c-hero--header">
    <div class="c-hero__body">
        <div class="c-hero__body-logo">
            <img class="c-img | o-fit" 
                srcset="/assets/img/brands/motability@100.webp 100w, 
                        /assets/img/brands/motability@200.webp 200w" 
                sizes="(max-width: 52.125rem) 56px, 72px" 
                loading="lazy" 
                alt
            >
        </div>
        <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</header>

<header class="c-hero c-hero--header">
    <div class="c-hero__body">
        <a class="c-hero__body-logo" href="#hero_logo">
            <img class="c-img | o-fit" 
                srcset="/assets/img/brands/motability@100.webp 100w, 
                        /assets/img/brands/motability@200.webp 200w" 
                sizes="(max-width: 52.125rem) 56px, 72px" 
                loading="lazy" 
                alt
            >
        </a>
        <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</header>

<header class="c-hero c-hero--header">
    <div class="c-hero__body">
        <a class="c-hero__body-logo" href="#hero_logo">
            <img class="c-img | o-fit" 
                srcset="/assets/img/brands/motability@100.webp 100w, 
                        /assets/img/brands/motability@200.webp 200w" 
                sizes="(max-width: 52.125rem) 56px, 72px" 
                loading="lazy" 
                alt
            >
        </a>
        <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="c-hero__body-actions">
            <a class="c-btn c-btn--primary" href="#hero_btn_1">Button</a>
            <a class="c-btn c-btn--secondary" href="#hero_btn_2">Button</a>
        </div>
    </div>
</header>

<header class="c-hero c-hero--header">
    <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                <a class="c-link-bare" href="#link_example">
                    Link
                    <span aria-hidden="true">→</span>
                </a>
            </p>
        </div>
    </div>
</header>

<header class="c-hero c-hero--header c-hero--center">
    <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                <a class="c-link-bare" href="#link_example">
                    Link
                    <span aria-hidden="true">→</span>
                </a>
            </p>
        </div>
    </div>
</header>

<header class="c-hero c-hero--header c-hero--center">
    <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                <a class="c-link-bare" href="#link_example">
                    Link
                    <span aria-hidden="true">→</span>
                </a>
            </p>
        </div>
        <div class="c-hero__body-actions">
            <a class="c-btn c-btn--primary" href="#hero_btn_1">Button</a>
            <a class="c-btn c-btn--secondary" href="#hero_btn_2">Button</a>
        </div>
    </div>
</header>