Alternate Image Text

<section class="ps ps-alternate ps-alternate--image-text">
    <div class="ps__wrap">
        <div class="ps__main grid grid--12 grid--align-center">
            <div class="span-1-6">
                <div class="ps__img">
                    <img class="ps-alternate--image-text__img" src=" ../../img/illustrations/sprinting.png" alt="" width="500px" height="400" />
                </div>
            </div>
            <div class="span-7-12">
                <h3 class="text--xl">Model your editor</h3>
                <p>
                    Model custom types to match your desired design. Create reusable fields and custom components (we call them Slices...you'll hear us talk about them a lot) to enable dynamic layouts and build the editor experience that you want.
                </p>

                <a href="#" class="a--primary">Learn more on our pricing page</a>
            </div>

            <div class="span-7-12">
                <div class="ps__img">
                    <img class="ps-alternate--image-text__img" src=" ../../img/illustrations/jumping.png" alt="" width="500px" height="400" />
                </div>
            </div>
            <div class="span-1-6">
                <h3 class="text--xl">Model your editor</h3>
                <p>
                    Model custom types to match your desired design. Create reusable fields and custom components (we call them Slices...you'll hear us talk about them a lot) to enable dynamic layouts and build the editor experience that you want.
                </p>

                <a href="#" class="a--primary">Learn more on our pricing page</a>
            </div>

            <div class="span-1-6">
                <div class="ps__img">
                    <img class="ps-alternate--image-text__img" src=" ../../img/illustrations/sprinting.png" alt="" width="500px" height="400" />
                </div>
            </div>
            <div class="span-7-12">
                <h3 class="text--xl">Model your editor</h3>
                <p>
                    Model custom types to match your desired design. Create reusable fields and custom components (we call them Slices...you'll hear us talk about them a lot) to enable dynamic layouts and build the editor experience that you want.
                </p>

                <a href="#" class="a--primary">Learn more on our pricing page</a>
            </div>

            <div class="span-7-12">
                <div class="ps__img">
                    <img class="ps-alternate--image-text__img" src=" ../../img/illustrations/jumping.png" alt="" width="500px" height="400" />
                </div>
            </div>
            <div class="span-1-6">
                <h3 class="text--xl">Model your editor</h3>
                <p>
                    Model custom types to match your desired design. Create reusable fields and custom components (we call them Slices...you'll hear us talk about them a lot) to enable dynamic layouts and build the editor experience that you want.
                </p>

                <a href="#" class="a--primary">Learn more on our pricing page</a>
            </div>
        </div>
    </div>
</section>