<div id="contact-anchor" class="a-anchor"></div>
<section class="o-contact10 m-section">
	<div class="m-section__content container">
		<div class="o-contact10__row row">
			<div class="col-4 col-md-8">
				<img src="https://placehold.it/180x180/" class="o-contact10__icon" alt="Get Free Inspiration">
			</div>
			<div class="col-20 col-md-16">
				<h4>Get Free Inspiration</h4>
				<p>Enter your email and get PDF with inspirations for free.</p>
				<form action="//*.us12.list-manage.com/subscribe/post?u=*&amp;amp;id=*" target="_blank" method="post" class="o-contact10__form">
					<div class="row">
						<div class="col-14">
							<input class="o-contact10__input a-form-input" name="EMAIL" id="frm-pc-form-EMAIL">
						</div>
						<div class="col-10">
							<button name="subscribe" class="o-contact10__submit a-button a-button--block">Submit</button>
						</div>
						<div class="col-sm-24">
							<input type="checkbox" name="acceptance" id="frm-pc-form-acceptance" class="m-form-checkbox">
							<label class="o-contact10__checkbox m-form-checkbox__label" for="frm-pc-form-acceptance">By sending this form you accept our <a href=./en target='_blank'>privacy policy</a>.</label>
						</div>
					</div>
					<div class="sr-only" aria-hidden="true">
						<input type="text" name="b_e4643fdcd825df808f637040d_9dda06cbcd" tabindex="-1" value="">
					</div>
				</form>
			</div>
		</div>
	</div>
</section>

@import "atoms/button/index";

@import "atoms/form-input/index";

@import "molecules/form-checkbox/index";

@import "molecules/section/index";

.o-contact10 {

    background: color('gray-light');

    &__row {

        align-items: center;

    }

    &__form {

        max-width: map-get($container-max-widths, 'sm');

    }

    &__icon {

        display: block;
        margin-left: auto;

    }

    #{&} &__checkbox {

        margin-top: 0;

        &:before {

            background: color('white');

        }

    }

}