---
interface Props {
  variant?: 'extra-short' | 'short' | 'normal';
  class?: string;
}
const { variant = 'normal', class: className } = Astro.props;
---

<div
  class:list={[
    "relative grid",
    variant === "extra-short" ? "h-20" : variant === "short" ? "h-25" : "h-52",
    className,
  ]}
  style="grid-template-rows: 80fr 60fr 45fr 20fr 10fr"
>
  <div class="bg-bright-yellow dark:bg-gold"></div>
  <div class="bg-gold dark:bg-orange"></div>
  <div class="bg-orange dark:bg-red"></div>
  <div class="bg-red dark:bg-magenta"></div>
  <div class="bg-magenta dark:bg-magenta-dark"></div>
</div>
