Footer {% include 'components/mean-bean/footer' %}
#
HTML
<div class="mean-bean">
    <div class="mean-bean-sign-section">
        <div class="inner clearfix">
            <div class="mobile-only">
                <h2>
                    Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span>
                </h2>
            </div>
            <picture>
                <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Main_Footer_Desktop.png, /images/mainsite5/mean-bean/2019/Main_Footer_Desktop_@2x.png 2x">
                    <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile@2x.gif 2x">
                        <img src="/images/mainsite5/mean-bean/2019/MeanBean_Main_Footer_Mobile@2x.gif" alt="Mean Bean Challenge">
                    </picture>
                    <div class="desktop-only">
                        <h2>
                            Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span>
                        </h2>
                    </div>
                    <div class="large-col-6">
                        <div>
                            <a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
                                <div class="button-bottom"></div>
                                <div class="button-top">Sign Up Today</div>
                            </a>
                        </div>
                    </div>
                    <div class="large-col-6">
                        <div>
                            <a href="javascript:void(0);" data-lightbox="1" class="show-lightbox button button--mean-bean button--mean-bean-red">
                                <div class="button-bottom"></div>
                                <div class="button-top">Invite a friend</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lightbox lightbox--large mean-bean" data-lightbox="1">
            <picture class="desktop-only">
                <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
                    <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
                </picture>
                <h1>
                    Invite a friend 
                </h1>
                <p>Invite a friend to attempt the Mean Bean Challenge via…</p>
                <div class="share-container">
                    <a href="mailto:?&subject=Mean Bean&body=Copy" class="share-button share-button--email">
                        <div class="share-button__content">
                            <img src="/images/mainsite5/svg/social/email.svg" />
                            <div class="share-button__text"> Email</div>
                        </div>
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//tearfund.org/meanbean" class="share-button share-button--facebook">
                        <div class="share-button__content">
                            <img src="/images/mainsite5/svg/social/facebook.svg" />
                            <div class="share-button__text"> Facebook</div>
                        </div>
                    </a>
                    <a href="http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3
" class="share-button share-button--twitter">
                        <div class="share-button__content">
                            <img src="/images/mainsite5/svg/social/twitter.svg" />
                            <div class="share-button__text"> Twitter</div>
                        </div>
                    </a>
                    <a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="" class="share-button share-button--whatsapp mobile-only">
                        <div class="share-button__content">
                            <img src="/images/mainsite5/svg/social/whatsapp.svg" />
                            <div class="share-button__text"> Whatsapp</div>
                        </div>
                    </a>
                </div>
                <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
            </div>
Twig
<div class="mean-bean">	
	<div class="mean-bean-sign-section">
		<div class="inner clearfix">

			<div class="mobile-only">
				<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>
			</div>
			
			<picture>
			  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Main_Footer_Desktop.png, /images/mainsite5/mean-bean/2019/Main_Footer_Desktop_@2x.png 2x">
			  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile@2x.gif 2x">
			  <img src="/images/mainsite5/mean-bean/2019/MeanBean_Main_Footer_Mobile@2x.gif" alt="Mean Bean Challenge">
			</picture> 

			<div class="desktop-only">
				<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>
			</div>

				<div class="large-col-6">
					<div>
						<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
							
							<div class="button-bottom"></div>
							<div class="button-top">Sign Up Today</div>
							
						</a>
					</div>
				</div>


				<div class="large-col-6">
					<div>
						<a href="javascript:void(0);" data-lightbox="1" class="show-lightbox button button--mean-bean button--mean-bean-red">
							
							<div class="button-bottom"></div>
							<div class="button-top">Invite a friend</div>
							
						</a>
					</div>
				</div>

		</div>
	</div>
</div>

<div class="lightbox lightbox--large mean-bean" data-lightbox="1">
    <picture class="desktop-only">
        <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
            <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
        </picture>
        <h1>
            Invite a friend
        </h1>
        <p>Invite a friend to attempt the Mean Bean Challenge via…</p>
        <div class="share-container">
       		<a href="mailto:?&subject=Mean Bean&body=Copy" class="share-button share-button--email">
	            <div class="share-button__content">
	                <img src="/images/mainsite5/svg/social/email.svg" />
	                <div class="share-button__text"> Email</div>
	            </div>
	        </a>
	        <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//tearfund.org/meanbean" class="share-button share-button--facebook">
	            <div class="share-button__content">
	                <img src="/images/mainsite5/svg/social/facebook.svg" />
	                <div class="share-button__text"> Facebook</div>
	            </div>
	        </a>
	         <a href="http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3
	" class="share-button share-button--twitter">
	            <div class="share-button__content">
	                <img src="/images/mainsite5/svg/social/twitter.svg" />
	                <div class="share-button__text"> Twitter</div>
	            </div>
	        </a>
	        <a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="" class="share-button share-button--whatsapp mobile-only">
	            <div class="share-button__content">
	                <img src="/images/mainsite5/svg/social/whatsapp.svg" />
	                <div class="share-button__text"> Whatsapp</div>
	            </div>
	        </a>
	    </div>
        <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
    </div>
{}

Eat Beans Fight Hunger.

Mean Bean Challenge

Eat Beans Fight Hunger.