<div id="section-anchor" class="a-anchor"></div>
<section class="m-section bg-gray-light">
	<div class="m-section__content container">
		<h2 class="m-section__title"> Section Title </h2>
		<p class="m-section__perex"> Section Perex...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at. Sed convallis magna eu sem. Duis pulvinar. </p>
		<div class="m-buttons text-center">
			<a href="#" class="a-button"> Section Button </a>
		</div>
	</div>
	<div class="m-section__background a-background a-background--cover a-background--center">
		<picture>
			<source
				srcset="https://placehold.it/767x600"
				media="(max-width: 767px)" />
			<source
				srcset="https://placehold.it/1920x1080" />
			<img
				src="https://placehold.it/1920x1080"
				width="1920"
				height="1080"
				loading="lazy"
				alt="Section background" />
		</picture>
	</div>
</section>

@import "atoms/background/index";

@import "atoms/button/index";

.m-section {

    padding: em(40px) 0;
    position: relative;
    z-index: 0;

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

        padding: em(60px) 0;

    }

    &__content {

        position: relative;

    }

    &__title {

        text-align: center;

    }

    &__perex {

        margin-left: auto;
        margin-right: auto;
        max-width: map-get($container-max-widths, 'md');
        text-align: center;

    }

    &-grow {

        flex: 1 0 auto;

    }

}