---
// Port of preview/pages/placeholder.html (layout: default, no title in the
// front matter — the <title> falls back to the site default).
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import PlaceholderCard1 from '@shared/components/cards/placeholder/Card1.astro';
import PlaceholderCard2 from '@shared/components/cards/placeholder/Card2.astro';
import PlaceholderCard3 from '@shared/components/cards/placeholder/Card3.astro';
import PlaceholderCard4 from '@shared/components/cards/placeholder/Card4.astro';
import PlaceholderCard5 from '@shared/components/cards/placeholder/Card5.astro';
import PlaceholderCard6 from '@shared/components/cards/placeholder/Card6.astro';

const cols = [1, 2, 3, 4];
---

<DefaultLayout pageHeader="Placeholder" pageMenu="base.placeholder">
	<div class="row row-cards">
		{
			cols.map(() => (
				<div class="col-3">
					<PlaceholderCard1 />
				</div>
			))
		}
		<div class="col-4">
			<div class="row row-cards">
				<div class="col-12">
					<PlaceholderCard3 />
				</div>
				<div class="col-12">
					<PlaceholderCard4 />
				</div>
			</div>
		</div>
		<div class="col-4">
			<div class="row row-cards">
				<div class="col-12">
					<PlaceholderCard1 />
				</div>
				<div class="col-12">
					<PlaceholderCard2 />
				</div>
			</div>
		</div>
		<div class="col-4">
			<div class="row row-cards">
				<div class="col-12">
					<PlaceholderCard5 />
				</div>
				<div class="col-12">
					<PlaceholderCard6 />
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>