Heading lorem ipsum dolor sit

<div class="o-hero o-hero--big">
	<div class="container">
		<div class="o-hero__stage">
			<div class="o-hero__top"></div>
			<div class="o-hero__middle row">
				<div class="o-hero__column col">
					<h1 class="o-hero__title">Heading lorem ipsum dolor sit</h1>
					<p class="o-hero__subtitle">Proin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida dolor sit amet lacus accumsan et viverra justo commodoProin gravida dolor sit amet lacus. Acumsan et viverra justo commodo.</p>
					<div class="m-buttons">
						<a href="#" class="a-button"> Link </a>
						<a href="#" class="a-button"> Link 02 </a>
					</div>
				</div>
			</div>
			<div class="o-hero__bottom">
				<a href="#browse-hero" class="o-hero__arrow">
					<i class="icon-chevron-down" aria-hidden="true"></i>
				</a>
			</div>
		</div>
	</div>
	<div class="o-hero__background a-background a-background--cover">
		<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>
</div>
<div id="browse-hero" class="a-anchor"></div>

@import "atoms/background/index";

@import "atoms/button/index";

@import "molecules/buttons/index";

.o-hero {

    $self: &;

    position: relative;
    z-index: 0;

    &__stage {

        display: flex;
        flex-direction: column;
        min-height: 100vh;
        position: relative;

    }

    &__column {

        padding-bottom: space(2);
        padding-top: space(2);
        text-align: left;

    }

    &__top,
    &__bottom {

        display: flex;
        left: 0;
        justify-content: center;
        max-height: space(4);
        position: absolute;
        text-align: center;
        width: 100%;

    }

    &__top {

        top: 0;

    }

    &__bottom {

        align-items: flex-end;
        bottom: 0;

    }

    &__middle {

        margin-bottom: auto;
        margin-top: auto;
        padding-bottom: space(4);
        padding-top: space(4);

    }

    &__subtitle {

        @include font-size(large);
        line-height: line-height(medium);

    }

    &__arrow {

        @include font-size(x-large);
        display: inline-block;
        line-height: 1;
        padding: space(1);

    }

    &__background {

        background-color: color('gray-light');
        background-position: center center;
        background-size: cover;

    }

    &--big {

        #{$self}__stage {

            min-height: 100vh;

        }

    }

}