/////////////////////////// Flex Content Blocks /////////////////////////// .flex-wrapper { display: flex; flex-wrap: wrap; margin: 1.5rem 0; } .flex-container { margin-right: 1rem; &.half { width: calc(50% - 1rem); } &.third { width: calc(33.33% - 1rem); } &.quarter { width: calc(25% - 1rem); } &.two-thirds { width: calc(66% - 2rem);} &.half, &.third, &.quarter { table:not(:last-child) {margin-right: 1rem;} } img { margin-bottom: 0;} table { display: table; } } //////////////////////////////////////////////////////////////////////////////// ///////////////////////////////// MEDIA QUERIES //////////////////////////////// //////////////////////////////////////////////////////////////////////////////// @include media(small) { .flex-container { &.half, &.third, &.two-thirds { width: calc(100% - 1rem); } &.quarter { width: calc(50% - 1rem); } } }