.hero {
background-position: 50% 50%; @include flexbox(); @include flex-direction(column); @include justify-content(center); h1 { font-size: map-get($base, font-size-h1-xl); } h2 { font-size: map-get($base, font-size-h2-xl); } h3 { font-size: map-get($base, font-size-h3-xl); } h4 { font-size: map-get($base, font-size-h4-xl); } h5 { font-size: map-get($base, font-size-h5-xl); } h6 { font-size: map-get($base, font-size-h6-xl); } p { font-size: map-get($base, font-size-xl); } @include media-breakpoint-down(lg) { h1 { font-size: map-get($base, font-size-h1-lg); } h2 { font-size: map-get($base, font-size-h2-lg); } h3 { font-size: map-get($base, font-size-h3-lg); } h4 { font-size: map-get($base, font-size-h4-lg); } h5 { font-size: map-get($base, font-size-h5-lg); } h6 { font-size: map-get($base, font-size-h6-lg); } p { font-size: map-get($base, font-size-lg); } } @include media-breakpoint-down(md) { h1 { font-size: map-get($base, font-size-h1-sm); } h2 { font-size: map-get($base, font-size-h2-sm); } h3 { font-size: map-get($base, font-size-h3-sm); } h4 { font-size: map-get($base, font-size-h4-sm); } h5 { font-size: map-get($base, font-size-h5-sm); } h6 { font-size: map-get($base, font-size-h6-sm); } p { font-size: map-get($base, font-size); } } background-size: cover;
}
.hero–center {
text-align: center; .menu { @extend .menu--center; }
}
.hero–light {
@extend .text--light;
}
.hero–dark {
@extend .text--dark;
}
.hero__content {
margin: map-get($spacers, 5); @include media-breakpoint-down(lg) { margin: map-get($spacers, 5) map-get($spacers, 4); } @include media-breakpoint-down(md) { margin: map-get($spacers, 4) map-get($spacers, 3); }
}
.heros {
& > .hero { margin: map-get($spacers, 5); @include media-breakpoint-down(lg) { margin: map-get($spacers, 3); } @include media-breakpoint-down(md) { margin: map-get($spacers, 2) 0; } }
}