$hero-height-mobile: 500px;
$hero-height-desktop: 800px;

.c-hero {
    position: relative;
    background-color: color(black);
    color: color(white);
    height: $hero-height-mobile;
    width: 100%;

    @include mq($from: 840px) {
        height: $hero-height-desktop;
    }
}

.c-hero--shadowed {
    box-shadow: 0 1px 6px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23);
}

.c-hero--small {
    height: 400px;

    .c-hero__content-container {
        height: 400px;
    }
}

.c-hero__background {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.c-hero__content-container {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: $hero-height-mobile;
    text-align: center;

    @include mq($from: 840px) {
        height: $hero-height-desktop;
        text-align: left;
    }
}

.c-hero__content-container--center {
    text-align: center;
}

.c-hero__content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 30px;
    padding-right: 30px;
}

.c-hero__header {
    @include mq($until: 840px) {
        width: 90%;
        margin: 0 auto;
    }
}

.c-hero__logo {
    width: 200px;

    @include mq($from: 840px) {
        width: 400px;
    }
}