@s_showcase_image-caption_bg                : white;
@s_showcase_image-caption_color             : #333;
@s_showcase_image-caption_padding           : 1em;
@s_showcase_image-caption_font-size-mobile  : 1em;
@s_showcase_image-caption_font-size-desktop : .8em;
@s_showcase_image-caption_text-shadow       : none;

#wrapwrap .s_showcase_image {
    height: auto;
    text-align: left;
    .info {
        margin-bottom: 1.5em;
    }
    > .row {
        height: 100%;
    }
    figure {
        background-size : cover;
        position        : relative;
        height          : 200px;

        // Layout Options
        // =======================
        &.tl figcaption {
            top    : 0;
            left   : 0;
            bottom : auto;
            right  : auto;
            margin-left : 14px;
            text-align: right;
        }
        &.tr figcaption {
            top    : 0;
            left   : auto;
            bottom : auto;
            right  : 0;
        }
        &.bl figcaption {
            top    : auto;
            left   : 0;
            bottom : 0;
            margin-left : 14px;
            right  : auto;
            text-align: right;
        }
    }
    figcaption {
        position    : absolute;
        bottom      : 0;
        width       : 100%;
        text-shadow : @s_showcase_image-caption_text-shadow;
        font-size   : @s_showcase_image-caption_font-size-mobile;
        color       : @s_showcase_image-caption_color;
        background  : @s_showcase_image-caption_bg;
        padding     : @s_showcase_image-caption_padding;
        h6 {
            margin-top: 0;
        }
    }

    @media only screen and (min-width: @screen-md-min) {
        height: 350px;
        .info {
            height: 100%;
            margin-bottom: 0;
            .o-flex-display();
            .o-flex-flow(column, nowrap);
            .o-justify-content(center);
        }
        figure {
            height: 100%;
        }
        figcaption {
            position     : absolute;
            bottom       : 0;
            right        : 0;
            width        : 50%;
            font-size : @s_showcase_image-caption_font-size-desktop;
            padding   : @s_showcase_image-caption_padding;
        }
    }

    &.s_right {
        text-align: right;
        figure {
            float: right;

            // Layout Options
            // =======================
            &.tl figcaption {
                margin-left: 0;
            }
            &.tr figcaption {
                margin-right : 14px;
            }
            &.bl figcaption {
                margin-left: 0;
            }
        }

        @media only screen and (min-width: @screen-md-min) {
            figcaption {
                margin-right : 14px;
                text-align   : left;
            }
        }
    }
}
