---
const { list, routeName } = Astro.props;

import CardEditorial from "./CardEditorial.astro";
---

<ul class="list" role="list">
	{
		list.map((item) => (
			<li class="list__item">
				<CardEditorial item={item} routeName={routeName} />
			</li>
		))
	}
</ul>

<style>
	.list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
		gap: var(--space-m-l);
	}
	.list > * {
		margin: 0;
	}
</style>