---
interface Props {
	variant?: 'offset' | 'small';
}

const { variant } = Astro.props;
---

<ul class:list={['grid', { offset: variant === 'offset', small: variant === 'small' }]}>
	<slot />
</ul>

<style>
	.grid {
		display: grid;
		grid-auto-rows: 1fr;
		gap: 1rem;
		list-style: none;
		padding: 0;
	}

	.grid.small {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	.grid.small > :global(:last-child:nth-child(odd)) {
		grid-column: 1 / 3;
	}

	@media (min-width: 50em) {
		.grid {
			grid-template-columns: 1fr 1fr;
			gap: 4rem;
		}

		.grid.offset {
			--row-offset: 7.5rem;
			padding-bottom: var(--row-offset);
		}

		.grid.offset > :global(:nth-child(odd)) {
			transform: translateY(var(--row-offset));
		}

		.grid.offset > :global(:last-child:nth-child(odd)) {
			grid-column: 2 / 3;
			transform: none;
		}

		.grid.small {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 2rem;
		}

		.grid.small > :global(*) {
			flex-basis: 20rem;
		}
	}
</style>