
#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;
        padding     : $s-showcase-image-caption-padding;

        &:not([class*=bg-]) {
            color       : $s-showcase-image-caption-color;
            background  : $s-showcase-image-caption-bg;
        }

        h6 {
            margin-top: 0;
        }
    }

    @include media-breakpoint-up(lg) {
        height: 350px;
        .info {
            height: 100%;
            margin-bottom: 0;
            display: flex;
            flex-flow: column nowrap;
            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;
            }
        }

        @include media-breakpoint-up(lg) {
            figcaption {
                margin-right : 14px;
                text-align   : left;
            }
        }
    }
}
