@import '../../style/front-end/variables.scss';

.storytelling-hero {
    position: relative;

    .hero-texture {
        position: absolute;
        top: 0;
        width: 100%;
        padding: 2rem 0rem;

        img {
            height: 100%;
            object-fit: cover;
        }
    }

    .hero-image-wrapper {
        left: 15vw;
        z-index: 1;
    }

    h1.hero-title-wrapper {
        z-index: 2;
        position: absolute;
        top: 20%;

        .hero-title {
            color: #000;
            font-family: $source-serif-pro;
            font-size: 2.5rem;
            display: block;
            padding-bottom: 1rem;
            font-style: italic;
        }

        .hero-subtitle {
            font-family: $united-sans-condensed;
            color: #ffffff;
            text-transform: uppercase;
            background-color: #000;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
            padding: .25em .2em .1em;
            line-height: 1.5;
            margin-top: .5rem;
            border-radius: 4px;
        }
    }

}