<div class="hero">
    <div class="row">
        <div class="hero__caption">
            <h1 class="hero__heading">About IATI</h1>
            <p class="hero__subheading">IATI is a common format to share data on aid and development for better decision making and outcomes</p>
        </div>
        <div class="hero__emblem">
            <img class="hero__emblem__mask" src="/assets/img/hero3.jpg" alt="alt tag">
        </div>
    </div>
</div>

<div class="hero hero--minor">
    <div class="row">
        <div class="hero__caption">
            <h1 class="hero__heading">About IATI</h1>
            
                <p class="hero__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            
        </div>
    </div>
</div>

<div class="hero hero--image" style="background-image: url(/assets/img/hero3.jpg)">
    <div class="row">
        <div class="max-meter">
            <div class="hero__caption">
                <h1 class="hero__heading">About IATI</h1>

                <p class="hero__subheading">Some large introductory text that can provide an overview of what this page is about</p>

                <span class="hero__type">Event type</span>
            </div>
        </div>
    </div>
</div>

<div class="hero hero--minor">
    <div class="row">
        <div class="max-meter max-meter--center">
            <div class="hero__caption">
                <h1 class="hero__heading">About IATI</h1>
            </div>
        </div>
    </div>
</div>