/**
 *  component: hero
 *
 *  background-size is as default: cover - Resize the background image to cover the entire container
 *
 *  <div class="hero" style="width: value; height: value; background-image: url(path)"></div>
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

@mixin crispy__hero() {
    .hero {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

        &--top {
            background-position: top center;
        }

        &--bottom {
            background-position: bottom center;
        }

        &--contain {
            background-size: contain;
        }
    }
}