/* B3GRID
BRUTAL BLOCKS 'n BRICKS GRID
**********************************/

.blocks, .bricks { display: flex; display: -webkit-flex; display: -ms-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } /* outer wrapper for blocks and bricks */
.block { display: block; flex: 1; -ms-flex: 1; -webkit-flex: 1; }
.brick { display: inline-block; margin: 0; padding: 1em; }
.brick.right { float: right; }
.brick.left { float: left; }

/* Directions */
.blocks.reverse, .bricks.reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }

/* Widths - works with both blocks and bricks */
.b20 { -webkit-flex-basis: 20%; flex-basis: 20%; width: 20%; max-width: 20%; }
.b25 { -webkit-flex-basis: 25%; flex-basis: 25%; width: 25%; max-width: 25%; }
.b33 { -webkit-flex-basis: 33.33%; flex-basis: 33.33%; width: 33.33%; max-width: 33.33%; }
.b50 { -webkit-flex-basis: 50%; flex-basis: 50%; width: 50%; max-width: 50%; }
.b75 { -webkit-flex-basis: 75%; flex-basis: 75%; width: 75%; max-width: 75%; }
.b100 { -webkit-flex-basis: 100%; flex-basis: 100%; width: 100%; }

/* Block Heights */
.block.bh20 { height: 20vh; }
.block.bh25 { height: 25vh; }
.block.bh33 { height: 33vh; }
.block.bh50 { height: 50vh; }
.block.bh75 { height: 75vh; }
.block.bh100 { height: 100vh; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width:320px) and (max-width:480px) {
	.b20, .b25, .b33, .b50, .b75 { width: 100%; min-width: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width:320px) {
	.b20, .b25, .b33, .b50, .b75 { width: 100%; min-width: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; }
}