<section class="container text-light">
    <div class="flex flex-col gap-6 sm:gap-15 bg-primary rounded-30 px-10 md:px-20 py-6 sm:py-15 pb-6 md:pb-20" data-aos="fade-up" data-aos-duration="400">
        <h2 class="bordered border-b-3 border-light text-center max-sm:text-lg">4 domaines <span class="italic">d'activité</span></h2>

        <div class="block sm:grid grid-cols-[auto_1fr] md:grid-cols-2 gap-2 gap-10 md:gap-15">
            <div class="flex flex-col gap-2 md:gap-15 py-2 self-center text-center md:text-start">
                <h3 class="italic border-r-0 md:border-r-2 py-2" data-aos="fade-right" data-aos-delay="400">L'industrie</h3>
                <h3 class="italic border-r-0 md:border-r-2 py-2" data-aos="fade-right" data-aos-delay="400">Le tertiaire</h3>
                <h3 class="italic border-r-0 md:border-r-2 py-2" data-aos="fade-right" data-aos-delay="400">Le BTP</h3>
                <h3 class="italic border-r-0 md:border-r-2 py-2" data-aos="fade-right" data-aos-delay="400">Le médical</h3>
            </div>
            <div class="hidden sm:block">
                <img data-aos="fade-left" data-aos-delay="500" alt="Équipe LCRH" class="st-rounded r5-4" style="width: 100%;" src="{{ asset('images/cabinet/section2.jpg') }}" />
            </div>
        </div>
    </div>
</section>
