// -------------------------------------------------------------------
// :: HERO
// -------------------------------------------------------------------

.o-hero{
	padding: 0 !important;
	position: relative;

	@include FLOW-at($tablet) {
		min-height: 25vh;
	}

	@include FLOW-at($desktop) {
		min-height: 40vh;
	}

	.m-breadcrumb{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
}


.o-hero--background{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5rem 0 !important;

	color: $white;

	h1 {
		color: $white;
		text-shadow: $textshadow;

		@include FLOW-at($tablet) {
			font-size: 3rem;
		}
	}

	h2 {
		margin-top: 0;
	}

	.m-breadcrumb{
		@extend %__m-breadcrumb--light;
	}

	.m-breadcrumb:after{
		background-color: rgba($black, 0.2);
	}

	@include FLOW-at($tablet) {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

}