.hero {
	position: relative;
	min-height: 420px;
	color: $color-white;
	background-image: $gradient-dash-sky;
	overflow: hidden;


	&__stripe {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 100%;
		overflow: hidden;
		transform: skewY(-5deg);
		transform-origin: 0;
		background: $color-white;
		z-index: 2;

		// TODO: Make this dependent on hero modifier not a separate modifier for stripe
		&--grey {
			background: $color-gray-light;
		}
		&--blue {
			background: $color-blue;
		}
		&--grey-blue {
			background: $color-gray-light-blueish;
		}
	}

	&__background {
		z-index: 1;
	}

	&__content {
		@extend .content; // DEV: Todo
		padding: 30px 30px 100px;
		margin: 0 auto;
		position: relative;
		z-index: 3;
		@include mq($to: extrasmall) {
			padding: 0;
		}
		@include mq($from: large) {
			padding-top: 60px;
			padding-bottom: 120px;
		}
		@include mq($from: (1280px + 60px)) {
			padding-left: 0;
			padding-right: 0;
		}
		@include mq($from: 1600px) {
			padding-bottom: 180px;
		}
		@include mq($from: 2200px) {
			padding-bottom: 200px;
		}
	}

	&__buttons {
		margin-bottom: 20px; /*optical*/
		&--get-dash {
			margin-bottom: 0;
		}
	}

	&__title, &__lead, &__text {
		text-shadow: 2px 2px 5px rgba(black, 0.2);
	}

	&__title {
		@include font-title-xxlarge();
		margin-top: 5px; /*optical*/
		margin-bottom: 15px; /*optical*/
		margin-left: -3px; /*optical*/
	}

	&__lead {
		@include font-lead();
	}

	&__text {
		background: rgba(0,0,0,0.05);
		border-radius: 17px;
		padding: 1px 10px;
		display: inline-block;
		font-size: 15px;
	}

	&__lead,
	&__text {
		& + * {
			margin-top: 20px; /*optical*/
		}
		& + .hero__buttons {
			margin-top: 34px; /*optical*/
		}
	}

	&--blog {
		min-height: 500px;
	}

	&--post {
		min-height: 420px;
		.hero__content {
			padding: 30px 0 60px;
			@include mq($from: large) {
				padding-bottom: 100px;
			}
			@include mq($from: 1600px) {
				padding-top: 40px;
				padding-bottom: 120px;
			}
			@include mq($from: 2200px) {
				padding-bottom: 150px;
			}
		}
		.hero__title {
			@include font-title-xlarge();
			margin-bottom: 9px; /*optical*/
			margin-left: -1px; /*optical*/
		}
	}

	&--light {
		color: $color-black;

		.hero {
			&__title, &__lead, &__text {
				text-shadow: none;
			}
		}
		.hero__background::after {
			background: none;
		}

		.burger:not(.is-active) .burger__burger {
			&, &::before, &::after {
				background-color: $color-black;
			}
		}
	}

	&--space {
		background: $gradient-atmosphere-blue-violet;
	}
}