JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article>
    <article>6</article>    
</section>

CSS

article {
	border-top: solid 1px #999;
	background: #efefef;
	overflow: hidden;
	padding: 0 0 10px;

	@include at-breakpoint($layout-l) {
		@include span-columns(4, $cols-l);
		@include vertical-gutter($cols-l);
		@include box-shadow(0 0 1px 0 #212121);
		border: none;

		&:nth-child(3n) {
			@include remove-omega;
		}
		&:nth-child(2n) {
			@include omega;
		}
	}

	@include at-breakpoint($layout-xl) {
		@include remove-omega;
		@include span-columns(4, $cols-xl);
		@include vertical-gutter($cols-xl);

		&:nth-child(2n) {
			@include remove-omega;
		}
		&:nth-child(3n) {
			@include omega;
		}
	}

}