body
{
	font-family: Roboto, sans-serif;
	background-color: #f1f1f1;
	margin: 0;
}

body>nav
{
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin: 1rem;
}

body>nav>select
{
	background-color: #fff;
	font-size: 1em;
	padding: .25em .5em;
	border: none;
	border-radius: .25em;
}

body>main
{
	display: grid;
	/*grid-template-columns: repeat(5, 1fr);*/
	grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
	grid-gap: 1rem;
	margin: 1rem;
	counter-reset: products;
}

body>main>article
{
	background-color: #fff;
	text-align: center;
	border-radius: .25em;
	counter-increment: products;
}

body>main>article>header
{
	padding: 1rem;
}

body>main>article>header>h2
{
	font-weight: normal;
	font-size: 1em;
	margin: 0;
}

body>main>article>header>div
{
	display: flex;
	justify-content: center;
	gap: 1em;
	font-size: .75em;
	opacity: .5;
}

/*body>main>article>div
{
	position: relative;
}*/

/*body>main>article>div::after
{
	content: "#" counter(products);
	position: absolute;
	right: 0;
	bottom: 0;
	padding: .5rem;
	background-color: rgba(255, 255, 255, .5);
	border-top-left-radius: .25rem;
}*/

body>main>article>div>img
{
	display: block;
	max-width: 100%;
}

body>main>article>ul
{
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	padding: 1rem;
	margin: 0;
}

body>main>article>ul>li
{
	font-size: 1.25em;
}

body>main>article>ul>li:first-child>span
{
	vertical-align: super;
}

body>main>article>ul>li>span
{
	font-size: .5em;
	opacity: .5;
}

body>main>article>ul>li>span+span
{
	display: block;
}

/*@media (orientation: portrait)
{
	body>main
	{
		grid-template-columns: repeat(2, 1fr);
	}
}*/