@import “../variables/derived-variables.sass” @import “../variables/initial-variables.sass”

$s-banner-default: 15vh !default $s-banner-medium: 30vh !default $s-banner-large: 60vh !default $s-banner-fullheight: 100vh !default $s-banner-padding: 30px !default $s-banner-align-items: center !default $s-banner-display: flex !default $s-banner-direction: column !default $s-banner-justify: center !default

.s-gradient

background: -webkit-linear-gradient(#21D4FD,  #158ba5)
color: white

.s-banner-container

display: $s-banner-display !important
flex-direction: $s-banner-direction
justify-content: center !important
width: 100% !important

.s-banner

background-color: $white
min-height: $s-banner-default
padding: $s-banner-padding
display: $s-banner-display 
align-items: $s-banner-align-items

.s-banner-medium

background-color: $white
min-height: $s-banner-medium
padding: $s-banner-padding
display: $s-banner-display
align-items: $s-banner-align-items

.s-banner-large

background-color: $white
min-height: $s-banner-large
padding: $s-banner-padding
display: $s-banner-display
align-items: $s-banner-align-items

.s-banner-primary-large

background-color: $primary
min-height: $s-banner-large
padding: $s-banner-padding
display: $s-banner-display
align-items: $s-banner-align-items
color: $white

.s-banner-fullheight

background-color: $white
min-height: $s-banner-fullheight
display: $s-banner-display
align-items: $s-banner-align-items
justify-content: $s-banner-justify
flex-direction: $s-banner-direction
padding: $s-banner-padding