---
import { Image } from 'astro:assets';
import NormalBadgeTemplate from '@assets/badges/normal.webp';
import RainbowBadgeTemplate from '@assets/badges/rainbow.webp';
import TransBadgeTemplate from '@assets/badges/trans.webp';
---

<div class="badge-row">
    <Image class="badge" src={NormalBadgeTemplate} alt="NormalBadgeTemplate" />
    <Image class="badge" src={RainbowBadgeTemplate} alt="RainbowBadgeTemplate" />
    <Image class="badge" src={TransBadgeTemplate} alt="TransBadgeTemplate" />
</div>

<style>
    .badge-row {
        display: flex;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .badge {
        margin-top: 0;
        min-width: 0;
        width: clamp(180px, 24vw, 240px);
        height: auto;
    }
</style>