<section class="is-fixed" style="width: 100%; height: 100%; overflow-y: auto">
<div class="has-background-grey-darker is-absolute" style="width: 100%; height: 100%; opacity: 0.6;"></div>
<div class="section">
<div class="is-relative has-background-white p-8 has-mw-3xl mx-auto" style="border-radius: 6px;">
<a class="is-absolute is-right-0 is-top-0 -mt-12 mt-0-tablet -mr-16-tablet" href="#">
<img src="acros-assets/icons/modals/decline.svg" alt="">
</a>
<div class="columns is-justify-content-space-between">
<div class="column">
<h3 class="title is-size-3 has-mw-xs">Sign up to our newsletter</h3>
<p class="mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="field mb-4">
<label class="label"><small>Password</small></label>
<div class="control">
<input class="input" type="text" placeholder="Type your email">
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary is-fullwidth">Sign In</button>
</div>
</div>
</div>
<div class="column">
<div class="is-relative p-8">
<div class="is-absolute is-left-0 is-top-0 has-background-primary" style="border-radius: 4px; opacity: 0.1; width: 100%; height:100%;"></div>
<img class="mb-16" src="acros-assets/icons/modals/mail-read.svg" alt="">
<h6 class="title is-size-6 has-text-weight-medium">There are many variations:</h6>
<ul>
<li class="is-flex is-align-items-center mb-2">
<img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
<small>It is a long established fact that a reader</small>
</li>
<li class="is-flex is-align-items-start mb-2">
<img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
</li>
<li class="is-flex is-align-items-center">
<img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
<small>All the Lorem Ipsum generators</small>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>