<script lang="ts">
  import { AspectRatio, Tile } from "../types";
</script>

<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
  2x1
</AspectRatio>

<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
  16x9
</AspectRatio>

<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
  4x3
</AspectRatio>

<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
  1x1
</AspectRatio>

<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
  3x4
</AspectRatio>

<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
  9x16
</AspectRatio>

<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
  1x2
</AspectRatio>

<AspectRatio ratio="16x9">
  <Tile style="height: 100%">Content</Tile>
</AspectRatio>
