<header class="sticky top-0 bg-white border-b border-gray-300">
	<nav class="container mx-auto flex items-center p-6">
		<a class="inline-block h-8 mr-auto" href="#">
			<img class="inline-block h-full w-auto" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/acme.svg" />
		</a>

		<ul class="flex items-center">
			<li class="ml-6">
				<a class="text-blue-500 hover:text-blue-800" href="#">Home</a>
			</li>
			<li class="ml-6">
				<a class="text-blue-500 hover:text-blue-800" href="#">Blog</a>
			</li>
			<li class="ml-6">
				<a class="text-blue-500 hover:text-blue-800" href="#">Events</a>
			</li>
			<li class="ml-6">
				<a class="text-blue-500 hover:text-blue-800" href="#">Contact</a>
			</li>
			<li class="ml-6">
				<a class="text-blue-500 hover:text-blue-800" href="#">About</a>
			</li>
		</ul>
	</nav>
</header>

<main class="">
	<div class="mx-auto p-4">
		<div class="articles">
			<!-- Medium Rectangle -->
			<div class="ad rounded overflow-hidden shadow-lg">
				<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/300x250%402.png" alt="300x250" />
			</div>
			<!-- Medium Rectangle -->

			<div class="article">
				<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
					<a href="#" class="flex flex-wrap no-underline hover:no-underline">
						<img src="https://source.unsplash.com/collection/225/800x600" class="h-24 w-full rounded-t pb-4 object-cover">
						<div class="w-full font-bold text-xl text-gray-900 px-4">Lorem ipsum dolor sit amet.</div>
						<p class="text-gray-800 font-serif text-base px-6 mb-5">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
						</p>
					</a>
				</div>
			</div>
		</div>
	</div>
</main>

.articles {
	display: grid;
	grid-gap: 16px;
	grid-template-columns: repeat(auto-fill, 300px);
	justify-items: center;
	align-items: center;
}

.article:nth-child(-n + 2) {
	order: -1;
}

@media only screen and (min-width: 650px) {
	.article:nth-child(-n + 3) {
		order: -1;
	}
}

@media only screen and (min-width: 970px) {
	.article:nth-child(-n + 5) {
		order: -1;
	}
}

@media only screen and (min-width: 1280px) {
	.article {
		order: -1;
	}
}

const node = document.querySelector('.article');
[...Array(10)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));