Website/assets/sass/layout/_banner.scss

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

/* Banner */

	#banner {
		$padding: _size(padding, default);

		position: relative;
		cursor: default;

		&:after {
			@include vendor('transition', 'opacity 3s ease-in-out');
			@include vendor('transition-delay', '0.5s');
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: _palette(bg-alt);
			opacity: 0.5;
		}

		video {
			@include vendor('object-fit', 'cover');
			@include vendor('object-position', 'center');
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			z-index: -1;
		}

		header {
			p {
				margin-bottom: _size(element-margin);
			}
		}

		.content {
			@include padding($padding * 1.25, 0, (_size(header, default) + 0.25, 0, 0, 0));
			text-align: center;
			position: relative;
			z-index: 1;

			&.primary {
				@include vendor('transition', (
					'transform 0.75s ease-out',
					'opacity 1.25s ease'
				));
			}

			&.secondary {
				@include padding($padding * 0.75, 0);
				background-color: transparentize(_palette(bg), 0.15);
			}
		}

		.features {
			@include vendor('display', 'flex');

			> section {
				padding: 0 2rem;
			}
		}

		#header + & {
			margin-top: (_size(header, default) * -1);
		}

		body.is-loading & {
			&:after {
				opacity: 1;
			}

			.content {
				&.primary {
					@include vendor('transform', 'translateY(0.5rem)');
					opacity: 0;
				}
			}
		}

		@include breakpoint(large) {
			$padding: _size(padding, large);

			.content {
				@include padding($padding * 1.25, 0, (_size(header, default) + 0.25, 0, 0, 0));

				&.secondary {
					@include padding($padding * 0.75, 0);
				}
			}
		}

		@include breakpoint(medium) {
			$padding: _size(padding, medium);

			.content {
				@include padding($padding * 2, 0, (_size(header, default) + 0.25, 0, 0, 0));

				&.secondary {
					@include padding($padding * 0.75, 0);
				}
			}

			.features {
				> section {
					padding: 0 1rem;
				}
			}
		}

		@include breakpoint(small) {
			$padding: _size(padding, small);

			.content {
				@include padding($padding, $padding * 0.5, (_size(header, default) + 0.25, 0, 0, 0));

				&.secondary {
					@include padding($padding * 0.75, 0);
				}
			}

			.features {
				> section {
					padding: 0 0.5rem;
				}
			}
		}

		@include breakpoint(xsmall) {
			$padding: _size(padding, small);

			.content {
				@include padding($padding * 2, $padding * 0.5, (_size(header, default) + 0.25, 0, 0, 0));

				&.secondary {
					@include padding($padding, 0);
				}
			}

			.features {
				display: block;

				> section {
					border-top: solid 1px _palette(border);
					margin: _size(element-margin) 0 0 0;
					padding: _size(element-margin) 1rem 0 1rem;

					&:first-child {
						border-top: 0;
						margin-top: 0;
						padding-top: 0;
					}
				}
			}
		}
	}