///
/// Editorial by Pixelarity
/// pixelarity.com | hello@pixelarity.com
/// License: pixelarity.com/license
///

/* Banner */

	#banner {
		@include padding(6em, 0);
		@include vendor('display', 'flex');

		h1 {
			margin-top: -0.125em;
		}

		.content {
			@include vendor('flex-grow', '1');
			@include vendor('flex-shrink', '1');
			width: 50%;
		}

		.image {
			@include vendor('flex-grow', '0');
			@include vendor('flex-shrink', '0');
			display: block;
			margin: 0 0 _size(element-margin) (_size(element-margin) * 2);
			width: 50%;

			img {
				height: 100%;
				-moz-object-fit: cover;
				-webkit-object-fit: cover;
				-ms-object-fit: cover;
				object-fit: cover;
				-moz-object-position: center;
				-webkit-object-position: center;
				-ms-object-position: center;
				object-position: center;
				width: 100%;
			}
		}

		@include orientation(portrait) {
			@include vendor('flex-direction', 'column-reverse');

			h1 {
				br {
					display: none;
				}
			}

			.content {
				@include vendor('flex-grow', '0');
				@include vendor('flex-shrink', '0');
				width: 100%;
			}

			.image {
				@include vendor('flex-grow', '0');
				@include vendor('flex-shrink', '0');
				margin: 0 0 (_size(element-margin) * 2) 0;
				height: 25em;
				max-height: 50vh;
				min-height: 18em;
				width: 100%;
			}

			@include breakpoint('<=xsmall') {
				.image {
					max-height: 35vh;
				}
			}
		}
	}