<div class="flex items-center">
    @switch($ageRange)
        @case(3)
            <div class="bg-gray-300 bg-gradient-to-t from-gray-400 to-gray-50 text-black font-bold rounded-full px-3 flex justify-center leading-[2]" >
                ۳+
            </div>
            @break
        @case(7)
            <div class="bg-gray-300 bg-gradient-to-t from-gray-400 to-gray-50 text-black font-bold rounded-full px-3 flex justify-center leading-[2]">
                ۷+
            </div>
            @break
        @case(12)
            <div class="bg-yellow-500 bg-gradient-to-t from-yellow-400 to-yellow-50 text-black font-bold rounded-full px-3 flex justify-center leading-[2]">
                ۱۲+
            </div>
            @break
        @case(15)
            <div class="bg-red-400 bg-gradient-to-t from-orange-500 to-orange-50 text-black font-bold rounded-full px-3 flex justify-center leading-[2]">
                ۱۵+
            </div>
            @break
        @case(18)
            <div class="bg-red-500 bg-gradient-to-t from-red-500 to-red-100 text-black font-bold rounded-full px-3 flex justify-center leading-[2]">
                ۱۸+
            </div>
        @break

    @endswitch
</div>
