@import 'constants';
@import 'styling';

.banner {
	@include banner-base;

// Banner sections
	.banner-header, .banner-footer {
		flex-grow: 0;
  		flex-shrink: 0;
  		padding: $banner-header-footer-padding;
	}

	.banner-body {
		padding: $banner-body-vertical-padding $banner-body-horizontal-padding;
	}

// Override for Heading Margins
	h1, .h1,
	h2, .h2,
	h3, .h3,
	h4, .h4,
	h5, .h5,
	h6, .h6 {
		margin-bottom: 0;

		&.subheader {
			margin-bottom: 0;
		}
	}

// Sizes
    @each $size, $padding in $banner-vertical-padding-list {
        &.#{$size} {
        	.banner-body {
        		padding-top: $padding;
        		padding-bottom: $padding;
        	}
        }
    }

    &.fullscreen {
    	min-height: 100vh;

    	.banner-body {
    		display: flex;
		    flex-grow: 1;
		    flex-shrink: 1;
		    align-items: center;
    	}
    }
}