/**
 * File: module/_banner.scss
 * Type: SASS module
 * Author: Chris Humboldt
 */

// Basic banner
.banner {
	@include display(block);
	@include position(relative);
	@include width(100%);
	@include text-align(center);
	@include background-colour($grey-x-light);
	@include text-colour($black-base);
	@include level(1);
	.limit {
		@include padding-horizontal($space-base);
		@include padding-vertical($space-large + $space-base);
		@include breakpoint(large) {
			@include padding-vertical($space-x2-large + $space-medium);
		}
	}
	h1 {
		@include display(block);
		@include padding-bottom(0px);
		@include width(100%, 800px);
		@include center();
		@include text-colour($black-base);
		@include text-line-height(40px);
		@include text-size(30px);
		@include text-weight(100);
		@include breakpoint(large) {
			@include text-line-height(60px);
			@include text-size(48px);
		}
	}
	p {
		@include width-max(800px);
		@include spacing-no();
		@include center();
		@include padding-top($space-base);
		@include padding-bottom($space-slight);
		@include text-colour(fade-out($black-base, 0.2));
		@include text-weight(300);
		@include breakpoint(large) {
			@include padding-top($space-slight);
			@include padding-bottom($space-medium);
			@include text-size(medium);
		}
	}
	&._fuse {
		@include gradient-angle($pink, lighten($yellow, 20%));
		h1 {
			@include text-colour($white);
		}
		p {
			@include text-colour(fade-out($white, 0.25));
		}
	}
	&._fuse-animated {
		@include gradient-animate-angle($pink, lighten($yellow, 20%));
		h1 {
			@include text-colour($white);
		}
		p {
			@include text-colour(fade-out($white, 0.25));
		}
	}
}
