/* Slider / Hero
 *----------------------------------------------------------------------------*/
.hero {
    clear: both;
    height: 200px;
    max-height: 800px;
    box-sizing: border-box;
    background-color: #eee;

    color: #fff;
    text-align: center;
}

.hero__cell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.hero__cell__inner {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;

    overflow: hidden;
}

.hero__cell__wrap {
    display: table-cell;

    width: 100%;
    vertical-align: bottom;
}

.hero__inner-wrapper {
    background: linear-gradient(to bottom, transparent, black);
}

.hero .hero__title {color: #fff; font-size: 1.75rem;}
.hero .hero__link {color: #fff;}

@media only screen and (min-width: 30em) {
    .hero__title { font-size: 1.75rem; }
}

@media only screen and (min-width: 45em) {
    .hero__title { font-size: 2.25rem; }
}

@media only screen and (min-width: 64em) {
    .hero__title { font-size: 3rem; }
}

@media only screen and (min-width: 80em) {
    .hero__title { font-size: 3.5rem; }
}

@media only screen and (min-width: 600px) { .hero {height: 300px;} }
@media only screen and (min-width: 840px) { .hero {height: 400px;} }
@media only screen and (min-width: 1080px) { .hero {height: 500px;} }
@media only screen and (min-width: 1320px) { .hero {height: 600px;} }
@media only screen and (min-width: 1560px) { .hero {height: 700px;} }
@media only screen and (min-width: 1800px) { .hero {height: 800px;} }