{% load wagtailimages_tags %}

{% block extra_css %}
<style>
    .simg {
        display: none;
    }

    .tile:hover.simg {
        display: block;
    }

    .servtile:hover {
        background-color: #f4931e;
        /* background-image: linear-gradient(to right, #F2911E, #e6951b, #DBAC4E, #d2743e); */
        /* background-image: linear-gradient(to right bottom, #e5a038, #c27342, #925043, #5a3638, #231f20); */
    }
    .servtile:hover span {
        color: black;
    }
    
   
</style>
{% endblock %}

{% block content %}

<div class="container mx-auto">
    
    <div class="flex justify-center items-center">

        <div class="w-full grid sm:grid-cols-2 lg:grid-cols-3 gap-1">

            {% for cat in services %}
            <a href="{{cat.url}}" class="servtile  py-4 px-10 shadow-lg tile">
                <div class="img flex gap-2">

                    {% if cat.imgText %}
                    <span class="text-5xl">
                        {{cat.imgText|safe}}
                    </span>
                    {% else %}
                    {% image cat.titleImg fill-60x60 decoding="async" loading="lazy"  %}
                    {% endif %}
                    <h1 class="prose sm:prose-sm md:prose-lg lg:prose-xl font-bold">
                        <span class="text-orange-400 ">
                            {{cat.title}} {{cat.titleImg}}
                        </span>
                    </h1>
                </div>
                {% for attr in cat.get_children %}
                <div>
                    <li class="opacity-80 prose sm:prose-sm">{{attr.title}}</li>

                </div>
                {% endfor %}
            </a>
            {% endfor %}
        </div>
    </div>


</div>
{% endblock %}