Aspect Ratio

<script lang="ts">
	import { AspectRatio } from 'bits-ui';
</script>

<AspectRatio.Root ratio={16 / 9} class="mx-auto w-full max-w-xl overflow-hidden rounded-2xl border border-ink-700 bg-[radial-gradient(circle_at_72%_28%,rgba(94,234,212,0.48),transparent_22%),radial-gradient(circle_at_20%_80%,rgba(99,102,241,0.55),transparent_35%),linear-gradient(135deg,#111827,#030712)]">
	<div class="flex h-full flex-col justify-between p-6">
		<span class="chip w-fit">16 : 9</span>
		<div>
			<p class="text-xs font-medium tracking-[0.2em] text-ink-200 uppercase">Signal study 04</p>
			<h3 class="mt-1 text-2xl font-bold tracking-tight text-white">Depth without an image request</h3>
		</div>
	</div>
</AspectRatio.Root>

<script lang="ts">
	import { AspectRatio } from 'bits-ui';
</script>

<div class="grid grid-cols-2 items-start gap-4">
	<div class="grid gap-2">
		<AspectRatio.Root ratio={4 / 3} class="overflow-hidden rounded-xl border border-ink-700 bg-[linear-gradient(145deg,#f97316_0%,#db2777_42%,#312e81_100%)]">
			<div class="flex h-full items-end p-4"><span class="rounded-md bg-black/45 px-2 py-1 font-mono text-xs text-white">4 : 3 editorial</span></div>
		</AspectRatio.Root>
		<p class="muted text-center text-xs">Landscape card</p>
	</div>
	<div class="grid gap-2">
		<AspectRatio.Root ratio={1} class="overflow-hidden rounded-xl border border-ink-700 bg-[radial-gradient(circle_at_35%_30%,#fef08a_0%,#22d3ee_20%,transparent_21%),linear-gradient(155deg,#0f172a,#581c87)]">
			<div class="flex h-full items-end p-4"><span class="rounded-md bg-black/45 px-2 py-1 font-mono text-xs text-white">1 : 1 cover</span></div>
		</AspectRatio.Root>
		<p class="muted text-center text-xs">Square artwork</p>
	</div>
</div>