/*https://codepen.io/bootstrapped/pen/RrabNe*/
/* EXAMPLE 1 - BOOTSTRAP FLEXBOX
   - Equal Height Columns in Rows
   - Equal Height Thumbnails
   - Flex Grow to Fill Paragraph Height
*/
/* Flexbox Equal Height Bootstrap Columns (fully responsive) */
@media only screen and (min-width : 481px) {
    .flex-row.row {
        display: flex;
        flex-wrap: wrap;
    }

        .flex-row.row > [class*='col-'] {
            display: flex;
            flex-direction: column;
        }

        .flex-row.row:after,
        .flex-row.row:before {
            display: flex;
        }

        .flex-row.row > [class*='col-'] > .box {
            display: flex;
            flex: 1;
        }
}




/* Grow thumbnails to fill columns height */
.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

    /* Flex Grow Text Container */
    .flex-row .caption p.flex-text {
        flex-grow: 1;
    }

/* Flex Responsive Image */
.flex-row img {
    width: 100%;
    height: auto;
    /*max-height: 150px;*/
    object-fit: contain;
}

/*
The object-fit property can have the following values:

fill - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit
contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
none - The replaced content is not resized
scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)
 */

.btn-default {
    margin-top: auto;
}
/* Push it and following elements to the bottom */