<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px">
<.card title="Visitors by device" description="January–June 2026, stacked">
<.area_chart label="Visitors by device, stacked, January to June 2026" variant="stacked" category="Month"
labels={vec!["Jan".to_owned(), "Feb".to_owned(), "Mar".to_owned(), "Apr".to_owned(), "May".to_owned(), "Jun".to_owned()]}
series={vec![("Desktop".to_owned(), vec![186.0, 305.0, 237.0, 173.0, 209.0, 214.0]), ("Mobile".to_owned(), vec![80.0, 200.0, 120.0, 190.0, 130.0, 140.0])]} />
</.card>
<.card title="Seats on the plan" description="Changes in steps">
<.area_chart label="Seats on the plan, January to June 2026" variant="step" name="Seats" category="Month"
values={vec![("Jan".to_owned(), 12.0), ("Feb".to_owned(), 12.0), ("Mar".to_owned(), 18.0), ("Apr".to_owned(), 18.0), ("May".to_owned(), 25.0), ("Jun".to_owned(), 30.0)]} />
</.card>
</div>