.hero {
	@extend .z-min;
	// @include background-image( url( '/images/bg.png' ) );
	background-color: $hero-bg;
	background-position: -100px -65px;
	height: 460px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
}

.hero {
	@extend .z-min;
	// @include background-image( url( '/images/bg.png' ) );
	background-color: $hero-bg;
	background-position: -100px -65px;
	height: 460px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;

	&:before {
		position:absolute;
		content: '';
		bottom:0;
		left: 0;
		width: 100%;
		height: 100px;
		@include linear-gradient(to bottom, rgba(0,0,0,0) ,rgba(0,0,0,0.5), $fallback: none);
	}
}

Add gradient to bottom of hero image
Add gradient to bottom of hero image
