<?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 mt-3.5">
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-12">
        <div class="text-center">
            <div class="flex justify-center items-center w-12 h-12 bg-gray-50 border border-gray-200 rounded-full mx-auto dark:bg-gray-800 dark:border-gray-700">
                <i class="bi bi-hdd-stack flex-shrink-0 w-5 h-5 text-gray-600 dark:text-gray-400 "></i>
            </div>
            <div class="mt-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Lorem Ipsum</h3>
                <p class="mt-1 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in arcu turpis. Quisque nunc dui, imperdiet a dolor et, venenatis rutrum lorem. </p>
            </div>
        </div>
        <div class="text-center">
            <div class="flex justify-center items-center w-12 h-12 bg-gray-50 border border-gray-200 rounded-full mx-auto dark:bg-gray-800 dark:border-gray-700">
                <i class="bi bi-hdd-stack flex-shrink-0 w-5 h-5 text-gray-600 dark:text-gray-400"></i>
            </div>
            <div class="mt-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Lorem Ipsum</h3>
                <p class="mt-1 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in arcu turpis. Quisque nunc dui, imperdiet a dolor et, venenatis rutrum lorem.</p>
            </div>
        </div>
        <div class="text-center">
            <div class="flex justify-center items-center w-12 h-12 bg-gray-50 border border-gray-200 rounded-full mx-auto dark:bg-gray-800 dark:border-gray-700">
                <i class="bi bi-hdd-stack flex-shrink-0 w-5 h-5 text-gray-600 dark:text-gray-400"></i>
            </div>
            <div class="mt-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Lorem Ipsum</h3>
                <p class="mt-1 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in arcu turpis. Quisque nunc dui, imperdiet a dolor et, venenatis rutrum lorem.</p>
            </div>
        </div>
        <div class="text-center">
            <div class="flex justify-center items-center w-12 h-12 bg-gray-50 border border-gray-200 rounded-full mx-auto dark:bg-gray-800 dark:border-gray-700">
                <i class="bi bi-hdd-stack flex-shrink-0 w-5 h-5 text-gray-600 dark:text-gray-400"></i>
            </div>
            <div class="mt-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Lorem Ipsum</h3>
                <p class="mt-1 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in arcu turpis. Quisque nunc dui, imperdiet a dolor et, venenatis rutrum lorem.</p>
            </div>
        </div>
    </div>
</div>
