<div id="contact-anchor" class="a-anchor"></div>
<section class="o-contact9">
	<div class="row no-gutters">
		<div class="col-md-12 order-md-2">
			<div class="o-contact9__box">
				<h3 class="font-normal line-height-normal">Company, Inc.</h3>
				<p>Street 12345,<br>678 90 City</p>
				<p>Call anytime between 9am - 6pm<br>Phone: <a href="tel:+49777777777" class="text-underline-never text-black">+49 777 777 777</a></p>
				<p>E-mail: <a href="mailto:info@domain.com" class="text-underline-never text-black">info@domain.com</a></p>
			</div>
		</div>
		<div class="o-contact9__map col-md-12 order-md-1">
			<div class="o-contact9__embed jq_gmap" data-gmap-options='<?php echo json_encode([ 'center' => [ 'lat' => 40.453054, 'lng' => -3.688344 ], 'zoom' => 13, 'fullscreenControl' => false, 'scrollwheel' => false ]); ?>'>
				<span data-gmarker-options='<?php echo json_encode([ 'position' => [ 'lat' => 40.453054, 'lng' => -3.688344 ] ]); ?>'></span>
			</div>
		</div>
	</div>
</section>

.o-contact9 {

    background: color('gray-light');
    position: relative;

    &__box {

        background: color('white');
        padding: space(2);
        text-align: center;

        @media (min-width: breakpoint-min(md)) {

            float: right;
            margin: space(2);
            position: relative;
            text-align: left;
            z-index: 2;

        }

        @media (min-width: breakpoint-min(lg)) {

            margin: space(3);
            padding: space(3);

        }

    }

    &__map {

        height: 0;
        padding-bottom: 56.25%;
        //padding-bottom: 100vh; // optionally
        position: relative;

        @media (min-width: breakpoint-min(md)) {

            position: static;

        }

    }

    &__embed {

        border: 0;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;

    }

}

import 'js-src/common/gmap';