grav-theme-future2021/assets/sass/components/_banner.scss

/* Banner */

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

		h1 {
			margin-top: -0.125em;
			font-size: 1.1em;
		}
		h2 {
			margin-top: -0.125em;
			font-size: 1em;
		}

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

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

			img {
				height: 100%;
				-moz-object-fit: contain;
				-webkit-object-fit: contain;
				-ms-object-fit: contain;
				object-fit: contain;
				-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;
				}
			}
		}
	}