// Mainly overrides bootstrap jumbotron settings
.jumbotron
	@extend .d-flex
	@extend .mb-0
	@extend .rounded-0
	background:
		position: center
		repeat: no-repeat
		size: cover
	margin-bottom: 0
	padding-top: 10em
	padding-bottom: 10em
	position: relative

	&:after
		background-color: rgba(black, .5)
		bottom: 0
		content: ''
		display: none
		left: 0
		position: absolute
		right: 0
		top: 0
		visibility: hidden

	// Black-transparent gradient from left to right to better read the overlay text.
	&.jumbotron-overlay
		*
			z-index: 1
		&:after
			display: block
			visibility: visible

	&.jumbotron-overlay-gradient
		*
			z-index: 1
		&:after
			background-color: transparent
			background-image: linear-gradient(45deg, rgba(black, .5) 25%, transparent 50%)
			display: block
			visibility: visible

		h2, p
			text-shadow: 1px 1px rgba(black, .2), 1px 1px 25px rgba(black, .5)

	&:hover
		text-decoration: none