<?php
/*
 * This file is part of the CLIENTXCMS project.
 * It is the property of the CLIENTXCMS association.
 *
 * Personal and non-commercial use of this source code is permitted.
 * However, any use in a project that generates profit (directly or indirectly),
 * or any reuse for commercial purposes, requires prior authorization from CLIENTXCMS.
 *
 * To request permission or for more information, please contact our support:
 * https://clientxcms.com/client/support
 *
 * Learn more about CLIENTXCMS License at:
 * https://clientxcms.com/eula
 *
 * Year: 2025
 */
?>
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
    <div class="grid gap-6 grid-cols-4 sm:gap-12 lg:grid-cols-4 lg:gap-8">
        <div class="text-center">
            <div class="flex">
            <div class="inline-flex mx-auto justify-center items-center size-[62px] rounded-full border-4 border-blue-50 bg-blue-100 dark:border-blue-900 dark:bg-blue-800">
                <i class="bi bi-hdd-stack h-5 w-5 shrink-0 icon-width text-blue-600 dark:text-blue-400"></i>
            </div>
            </div>
            <h4 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-neutral-200 mt-2">Lorem ipsum</h4>
            <p class="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-blue-600">0</p>
            <!--
            <p class="mt-1 text-gray-500 dark:text-neutral-500">Lorem ipsum dolor sit amet</p>
            -->
        </div>
        <div class="text-center">
            <div class="flex">
                <div class="inline-flex mx-auto justify-center items-center size-[62px] rounded-full border-4 border-blue-50 bg-blue-100 dark:border-blue-900 dark:bg-blue-800">
                    <i class="bi bi-hdd-stack h-5 w-5 shrink-0 icon-width text-blue-600 dark:text-blue-400"></i>
                </div>
            </div>
            <h4 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-neutral-200 mt-2">Lorem ipsum</h4>
            <p class="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-blue-600">0</p>
            <!--
            <p class="mt-1 text-gray-500 dark:text-neutral-500">Lorem ipsum dolor sit amet</p>
            -->
        </div>
        <div class="text-center">
            <div class="flex">
                <div class="inline-flex mx-auto justify-center items-center size-[62px] rounded-full border-4 border-blue-50 bg-blue-100 dark:border-blue-900 dark:bg-blue-800">
                    <i class="bi bi-hdd-stack h-5 w-5 shrink-0 icon-width text-blue-600 dark:text-blue-400"></i>
                </div>
            </div>
            <h4 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-neutral-200 mt-2">Lorem ipsum</h4>
            <p class="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-blue-600">0</p>
            <!--
            <p class="mt-1 text-gray-500 dark:text-neutral-500">Lorem ipsum dolor sit amet</p>
            -->
        </div>
        <div class="text-center">
            <div class="flex">
                <div class="inline-flex mx-auto justify-center items-center size-[62px] rounded-full border-4 border-blue-50 bg-blue-100 dark:border-blue-900 dark:bg-blue-800">
                    <i class="bi bi-hdd-stack h-5 w-5 shrink-0 icon-width text-blue-600 dark:text-blue-400"></i>
                </div>
            </div>
            <h4 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-neutral-200 mt-2">Lorem ipsum</h4>
            <p class="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-blue-600">0</p>
            <!--
            <p class="mt-1 text-gray-500 dark:text-neutral-500">Lorem ipsum dolor sit amet</p>
            -->
        </div>
    </div>
</div>
