<article>
	<h1>Our pies</h1>
	<dl>
		<div>
			<dt>Moo & Blue</dt>
			<dd>British beef steak & Stilton</dd>
		</div>
		<div>
			<dt>Kate & Sidney</dt>
			<dd>British beef steak, craft ale & kidney</dd>
		</div>
		<div>
			<dt>Heidi</dt>
			<dd>Goats’ cheese, sweet potato & spinach</dd>
		</div>
		<div>
			<dt>Wild Shroom</dt>
			<dd>Portobello & chestnut mushroom with asparagus & white wine</dd>
		</div>
		<div>
			<dt>Kevin</dt>
			<dd>Chestnut mushroom, tomato & quinoa with baby onions & thyme</dd>
		</div>
	</dl>
</article>

* {
	box-sizing: border-box;
}

body {
	font-family: "Open Sans", sans-serif;
	margin: 0;
	padding: 1rem;
}

article {
	max-width: 70rem;
	margin: 0 auto;
	border: 0.18rem solid lightgrey;
	padding: clamp(1rem, 2vw, 3rem);
	border-radius: 0.5rem;
}

h1, dl {
	margin: 0;
}

article > * + * {
	margin-top: 1rem;
}

dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1rem;
}

dl > div {
	background: antiquewhite;
	padding: 1rem;
}

dl > div:nth-child(4n - 2) {
	background: lavenderblush;
}

dl > div:nth-child(4n - 1) {
	background: azure;
}

dl > div:nth-child(4n) {
	background: lavender;
}

dt {
	font-weight: 700;
	font-size: 1.3rem;
}

dd {
	margin: 0;
}