<a href="#" class="button show-lightbox" data-lightbox="1">Share lightbox</a> 
<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="#" class="share-button share-button--whatsapp">
			<div class="share-button__content">
				<img src="/images/mainsite5/svg/social/twitter.svg" /> <div class="share-button__text"> Whatsapp</div>
			</div>
		</a>
		<a href="#" 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="#" 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>
	</div>
    <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>

<a href="#" class="button show-lightbox" data-lightbox="1">Share lightbox</a> 
<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="#" class="share-button share-button--whatsapp">
			<div class="share-button__content">
				<img src="/images/mainsite5/svg/social/twitter.svg" /> <div class="share-button__text"> Whatsapp</div>
			</div>
		</a>
		<a href="#" 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="#" 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>
	</div>
    <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>