Vehicle maintenance

<div class="product__maintenance-vehicle px-5 md:px-7.5">

    <div class="bg-primary-lighter px-6 pt-7.5 pb-10 md:px-10">

        <h2 class="text-xl md:text-2xl font-semibold tracking-tightened">Entretiens</h2>

        <div class="text-sm text-text-light tracking-tightened font-medium">Entretiens réalisés au sein du réseau Tressol Chabrier</div>



        <div class="flex mt-5.5 md:mt-3.75 gap-5">

            <div class="grid md:mt-2.5">

                <div class="grid grid-rows-[1fr_30px_1fr]">

                    <span class="flex-1 mx-auto"></span>

                    <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                    <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                </div>

                <div class="grid grid-rows-[1fr_30px_1fr]">

                    <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                    <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                    <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                </div>

                <div class="grid grid-rows-[1fr_30px_1fr]">

                    <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                    <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                    <span class="flex-1 mx-auto"></span>

                </div>

            </div>

            <div class="flex-1 grid">

                <div class="bg-white px-9 py-4.5 flex gap-10 items-center mt-2.5 rounded-tl-button rounded-tr-button">

                    <?= icon('draining', 'text-icon w-full max-w-[40px] max-h-[40px] shrink-0'); ?>

                    <div>

                        <div class="text-sm text-text-light font-semibold">Révision</div>

                        <div class="text-xxs text-icon font-medium">Mars 2023</div>

                    </div>

                </div>

                <div class="bg-white px-9 py-4.5 flex gap-10 items-center mt-2.5">

                    <?= icon('freins', 'text-icon w-full max-w-[40px] max-h-[40px] shrink-0'); ?>

                    <div>

                        <div class="text-sm text-text-light font-semibold">Changement des plaquettes de frein</div>

                        <div class="text-xxs text-icon font-medium">Juin 2022</div>

                    </div>

                </div>

                <div class="bg-white px-9 py-4.5 flex gap-10 items-center mt-2.5 rounded-bl-button rounded-br-button">

                    <?= icon('ice', 'text-icon w-full max-w-[40px] max-h-[40px] shrink-0'); ?>

                    <div>

                        <div class="text-sm text-text-light font-semibold">Révision de la climatisation</div>

                        <div class="text-xxs text-icon font-medium">Mai 2022</div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>