///
/// Ethereal by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Panel (Spotlight) */

	$pad: _size(pad);
	$pad-small-tb: _size(pad-small-tb);
	$pad-small-lr: _size(pad-small-lr);

	.panel.spotlight {
		@include vendor('align-items', 'stretch');
		position: relative;

		> * {
			z-index: 1;
		}

		.content {
			@include vendor('display', 'flex');
			@include vendor('flex-direction', 'column');
			@include vendor('justify-content', 'center');
			@include padding($pad, $pad);
		}

		.image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;

			img {
				@include vendor('object-fit', 'cover');
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		&.left {
			@include vendor('justify-content', 'flex-start');

			.content {
				background-image: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
			}
		}

		&.right {
			@include vendor('justify-content', 'flex-end');

			.content {
				background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
			}
		}
	}

	@include breakpoint(small) {
		.panel.spotlight {
			.content {
				@include padding($pad-small-tb, $pad-small-lr);
				@include vendor('flex-direction', 'column !important');
				background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.175)) !important;
				min-height: 25rem;
			}
		}
	}

	@include breakpoint(xsmall) {
		.panel.spotlight {
			.content {
				min-height: 30rem;
			}
		}
	}