{% load static imagefit %}
<div class="container steps mb-5">
    <div class="row">
        <div class="col-md-8 offset-md-2 mb-5">
            <div class="row">
                <div class="col-12 mt-3 text-center">
                    <h1>How Hook Coffee Works</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-5 icon-box text-right">
                    <div class="d-block ml-auto">
                        <img alt="Hook Coffee" class="img-fluid lazy ml-auto"
                             data-src="{{ "landing/ProcessInfoStep1.png"|resize:"150x150" }}"/>
                    </div>
                </div>
                <div class="col-2 line-box text-center">
                    <div class="line first"></div>
                    <div class="count">1</div>
                </div>
                <div class="col-5 text-left content-box">
                    <div class="d-block">
                        <h3 class="text-info mb-0">Choose your coffee</h3>
                        <p>or use our recommendation engine if you can't decide</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-5 text-right content-box">
                    <div class="d-block">
                        <h3 class="text-info mb-0">Choose how you want it</h3>
                        <p>whole, ground, drip coffee bags or Nespresso® compatible pods</p>
                    </div>
                </div>
                <div class="col-2 line-box text-center">
                    <div class="line"></div>
                    <div class="count">2</div>
                </div>
                <div class="col-5 text-right icon-box">
                    <div class="d-block mr-auto">
                        <img alt="Hook Coffee" class="img-fluid lazy"
                             data-src="{{ "landing/ProcessInfoStep2.png"|resize:'150x150' }}"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-5 text-right icon-box">
                    <div class="d-block ml-auto">
                        <img class="img-fluid lazy" alt="Hook Coffee"
                             data-src="{{ "landing/ProcessInfoStep3.png"|resize:'150x150' }}"/>
                    </div>
                </div>
                <div class="col-2 line-box text-center">
                    <div class="line"></div>
                    <div class="count">3</div>
                </div>
                <div class="col-5 text-left content-box">
                    <div class="d-block">
                        <h3 class="text-info mb-0">Adjust as you go</h3>
                        <p>coffee and frequency - you are in complete control</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-5 text-right content-box">
                    <div class="d-block">
                        <h3 class="text-info mb-0">Improve your techniques</h3>
                        <p>and coffee knowledge with our comprehensive guides and articles</p>
                    </div>
                </div>
                <div class="col-2 line-box text-center">
                    <div class="line last"></div>
                    <div class="count">5</div>
                </div>
                <div class="col-5 text-right icon-box">
                    <div class="d-block mr-auto">
                        <img class="img-fluid lazy" alt="Hook Coffee"
                             data-src="{{ "landing/ProcessInfoStep4.png"|resize:'150x150' }}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>