Four Up Layout
Creates a four-column layout using flexbox. The columns stack below breakpoint x-small (~704px). Between breakpoints x-small (~704px) and breakpoint small (~880px) the display shifts to a 2x2 grid
Column
Column
Column
Column
<section class="l-four-up">
<div class="l-four-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-four-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-four-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
<div class="l-four-up__col" style="text-align: center; padding: 2rem 4rem; background-color: #ddd">
Column
</div>
</section>