---
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>