art/_sass/components/_spotlights.scss

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

/* Spotlights */

	.spotlights {
		border-top: 0 !important;

		& + * {
			border-top: 0 !important;
		}

		> section {
			@include vendor('display', 'flex');
			@include vendor('flex-direction', 'row');
			background-color: desaturate(lighten(_palette(bg-alt), 2), 1);

			> .image {
				background-position: center center;
				background-size: cover;
				border-radius: 0;
				display: block;
				position: relative;
				width: 30%;

				img {
					border-radius: 0;
					display: block;
					width: 100%;
				}

				&:before {
					background: transparentize(_palette(bg), 0.1);
					content: '';
					display: block;
					height: 100%;
					left: 0;
					opacity: 0;
					position: absolute;
					top: 0;
					width: 100%;
				}
			}

			> .content {
				@include vendor('display', 'flex');
				@include vendor('flex-direction', 'column');
				@include vendor('justify-content', 'center');
				@include vendor('align-items', 'center');
				@include padding(2em, 3em);
				width: 70%;

				> .inner {
					margin: 0 auto;
					max-width: 100%;
					width: _size(inner);
				}
			}

			&:nth-child(2n) {
				@include vendor('flex-direction', 'row-reverse');
				background-color: desaturate(lighten(_palette(bg-alt), 4), 2);

				> .content {
					@include vendor('align-items', 'flex-end');
				}
			}
		}

		@include breakpoint(xlarge) {
			> section {
				> .image {
					width: 40%;
				}

				> .content {
					width: 60%;
				}
			}
		}

		@include breakpoint(large) {
			> section {
				> .image {
					width: 45%;
				}

				> .content {
					width: 55%;
				}
			}
		}

		@include breakpoint(medium) {
			> section {
				display: block;

				> .image {
					width: 100%;
				}

				> .content {
					@include padding(4em, 3em);
					width: 100%;
				}
			}
		}

		@include breakpoint(small) {
			> section {
				> .content {
					@include padding(3em, 1.5em);
				}
			}
		}
	}