/* Header of the page */
.featured
	background:
		color: $color-background
		image: url(https://www.blender.org/wp-content/themes/bthree/assets/images/placeholder_background_small.jpg)
		position: center bottom
		size: cover

	box-shadow: 0 0 15px rgba(black, .2)
	color: white
	display: flex
	flex-direction: column
	justify-content: flex-end
	min-height: 120px
	position: relative
	text-shadow: 1px 1px 1px rgba(black, .37)

	&+.container
		margin-top: 15px

	.container
		display: flex
		flex-direction: column
		height: 100%
		position: relative
		z-index: 1

	&-content // .featured-content
		+container-behavior
		margin-left: auto
		margin-right: auto
		padding-left: 25px
		padding-right: 25px
		z-index: 1

		h1
			margin-top: 35px
			margin-bottom: 10px
			font-weight: 400

	&-subtitle // .featured-subtitle
		margin-bottom: 25px
		max-width: 800px
		padding-left: 15px
		padding-right: 15px

	&-credits // .featured-credits
		bottom: -20px
		color: rgba($color-text, .4)
		font-size: $font-size-small
		position: absolute
		right: 15px
		text-shadow: none

	.page-header-main-ctas
		margin-bottom: 30px

		.page-header-main-cta
			+media-xs
				margin-bottom: 15px

				a
					display: block

	&.large
		align-items: center
		background-position-y: top
		height: $header-size-large
		text-align: center

		+media-xs
			height: auto

		h1
			font-size: 2.6rem
			margin-left: auto

		.featured-content
			margin: auto
			width: auto

		.featured-subtitle
			font-size: 1.2em

		.navbar-secondary
			ul.nav
				margin: auto

	&-overlay
		+position-absolute-zero
		background-color: transparent
		background-image: linear-gradient(rgba(white, .2), rgba(black, .55))

	h1
		+media-xs
			font-size: 2.8rem
			padding-bottom: 10px
			margin: 55px 0 0 0
		font-size: 2.3rem
		margin-bottom: 20px
		margin-left: 10px
		position: relative
		z-index: 1

	a
		color: white

	&-overlay-video
		+position-absolute-zero
		background-color: black
		height: 100%
		overflow: hidden
		width: 100%

		iframe
			+position-absolute-zero
			height: 200vh
			margin: auto -10vw
			width: 120vw

			+media-xs
				height: 100vh
				width: 200vw
				left: -50vw
