#hero-slider {
    position: relative;
    overflow: hidden
}

#hero-slider > figure {
    position: absolute;
    z-index: 1;
    width: 100%
}

#hero-slider > figure:first-child {
    z-index: 2
}

#hero-slider > .viewport {
    background-color: rgba(0,0,0,0);
    z-index: -1
}

#hero-slider figcaption {
    overflow: hidden;
    position: absolute;
    bottom:1rem;
    left:1rem;
    right:1rem
}

#hero-slider figcaption h1:not(:empty),
#hero-slider figcaption p:not(:empty) {
    padding: .4rem 1rem;
    display: inline-block;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: rgba(255,255,255,0.6)
}

#hero-slider figcaption h1 {
    font-weight: 600
}

#hero-slider figcaption p {
    font-weight: 600
}

#hero-slider figcaption > *:nth-child(2) {
    margin-top: .5rem
}

@media screen and (min-width: 928px) {
    #hero-slider h1 {
        font-size: 3rem
    }
}