.banner_wrapper {
    position: relative;
    margin-bottom: 30px;

    ul.actions {
        position: absolute;
        z-index: 100;
        right: 0;
    }
}

.banner {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 40%; /* relative to element width */
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;

    h1 {
        position: absolute;
        top: 50%;
        right: 6%;
        font-size: 28pt;
        font-family: FabricaRegular, Helvetica, Arial, sans-serif;
        background-color: rgba(32, 32, 32, 0.6);
        line-height: 1em;
        padding: 8px;
        color: #d4d2ff;
    }

    p {
        position: absolute;
        top: 68%;
        right: 6%;
        font-size: 12pt;
        font-family: FabricaRegular, Helvetica, Arial, sans-serif;
        background-color: rgba(32, 32, 32, 0.6);
        line-height: 1.2em;
        padding: 8px;
        color: white;
    }

    .banner_text.hidden {
        visibility: hidden;
    }
}

.banner-small-print {
    text-align: right;
    font-size: 0.9em;
    p {
        margin: 0.5em;
    }
}

/* Small-screen versions */
@media screen and (max-width: 1081px) {
    .banner {

        .banner_text {
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        h1 {
            position: static;
            text-align: right;
            padding-right: 6%;
            width: auto;
            font-size: 20pt;
        }

        p {
            position: static;
            width: auto;
            margin: 0;
            font-size: 11pt;
        }
    }
}

@media screen and (max-width: 601px) {
    .banner {
        h1 {
            font-size: 18pt;
        }
    }
}
