@extends('layouts.app')

@section('content')
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10">

    @foreach (config('karudhaas.topic_filters') as $namespace)
    <div
    class="relative flex items-center w-full px-2 transition-all duration-200 transform mini-card lg:max-w-md first:ml-4 last:pr-6 hover:-translate-y-4">
<div class="flex flex-col h-full overflow-hidden bg-white border-2 border-{{$namespace['color']}}-500 rounded-lg w-full">
        <div class="flex justify-center px-4 pt-4">
            <div class="flex flex-wrap items-center -mb-2">
                <a href="#"
            class="MvAamu inline-block text-md tracking-wide py-2 px-12 bg-{{$namespace['color']}}-500 text-white rounded-md mr-2 mb-2 transform transition-all duration-100 ease-in-out hover:bg-orange-50 border-2 border-gray-100 hover:border-{{$namespace['color']}}-500 hover:text-{{$namespace['color']}}-700"
                    style="font-weight: 100;">{{$namespace['dv_name']}}</a>
            </div>
        </div>

         <a href="#" class="relative block h-full px-4 py-4"
            style="min-height:auto;">
            <div class="leading-7 ">
            <p class="MvTyper text-center" style="direction: rtl;">{{$namespace['description']}}</p>
            </div>
        </a>


    </div>
    
</div>
    @endforeach

   



</div>
@endsection