/*html,
body {
    height: 100%;
    background: #f2f2f2;
}*/

/**,
*:before,
*:after {
box-sizing: border-box;
}*/

/* Container
---------------------------------------------------------------------- */

/* bm - the container for the grid items*/
.grid-container {
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
}
.container {
    position: relative;
    /*display: flex;*/
    /*flex-direction: row;*/
    /*flex-wrap: wrap;*/
    /*align-content: flex-start;*/
    /*justify-content: space-between;*/
    /*padding: 0;*/
}

/* Target Elements
---------------------------------------------------------------------- */

/*.bm - the gap elements fill in holes when there are an odd number of rows. */
.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}
.mix {
    background: #f2f2f2;
    border-radius: 0;
    margin-bottom: 1rem;
    position: relative;
}

.mix:before {
    content: '';
    display: inline-block;
    /*padding-top: 56.25%;*/
    /*padding-top: 75%;*/
    padding-top: 77.4%;
    /*border: 1px solid red;*/
}

/* Grid Breakpoints
---------------------------------------------------------------------- */

/* 3 Columns */
    .mix,
    .gap {
        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    }


/* 1 Column */

/*@media screen and (max-width: 900px) {
.mix,
.gap {
    width: calc(100% - (((1 - 1) * 1rem) / 1));
}
}*/

/*.mix,
.gap {
    width: calc(100% - (((1 - 1) * 1rem) / 1));
}*/


/* 2 Columns */

@media screen and (max-width: 900px) {
.mix,
.gap {
    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}
}
/* 3 Columns */

/*@media screen and (min-width: 541px) {
    .mix,
    .gap {
        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    }
}*/



/* 4 Columns */

/*@media screen and (min-width: 961px) {
    .mix,
    .gap {
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }
}*/

/* 5 Columns */

/*@media screen and (min-width: 1281px) {
    .mix,
    .gap {
        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
    }
}*/