 <section class="pt-20 lg:pb-90 cardStacking">
    <div class="container">
        <div class="lg:px-80 text-center sm:mb-50 mb-20">
            @if(isset($args['subtitle']) && $args['subtitle'] != '')
            <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
            @endif
            <h2 class="2xl:text-8xl xl:text-7xl lg:text-6xl sm:text-4xxl text-2xxl headline">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
            @if(isset($args['description']) && $args['description'] != '')
            <p class="sm:text-2xl text-lg font-light">{{ $args['description'] }}</p>
            @endif
        </div>
        <div class="grid grid-cols-12 gap-20">
            <div class="cardStacking__cards xl:block hidden"></div>

            @php
                $args['post_type'] = 'portfolio';
                $blogs = HelpDesk::elementPostsByArgs($args);
            @endphp

            @forelse($blogs as $blog)
            <div class="col-span-12 stackCard xl:mb-20">

                <div class="flex p-10 dark:bg-card bg-white sm:rounded-6xl rounded-2xl max-sm:flex-col group dz-hover-item">
                    <div class="sm:rounded-5xl rounded-2xl overflow-hidden xl:min-w-863 sm:w-1/2 relative z-1">
                        <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="dz-hover-img" data-displacement="{{ theme_asset('images/1.jpg') }}" data-intensity="0.6" data-speedin="1" data-speedout="1">
                            <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="size-full object-cover">
                        </a>
                    </div>
                    <div class="flex flex-1 flex-col md:px-55 md:pt-40 md:pb-45 px-30 pt-20 pb-10 overflow-hidden relative z-1 after:content-[''] after:absolute xl:after:bottom-0 after:-bottom-90 after:-left-50 xl:after:size-360 after:size-230 after:pointer-events-none dark:after:bg-[url('../images/background/bg4-light.svg')] after:bg-[url('../images/background/bg4.svg')] after:bg-no-repeat after:bg-bottom-left after:bg-contain after:-z-1 after:duration-500 group-hover:after:rotate-360">
                        <div class="flex-1">
                            <h3 class="md:text-4xxl text-4xl capitalize font-base font-medium">{{ $blog->title }}</h3>
                            <span class="block md:text-xl text-lg font-medium dark:text-white/40 text-black/40 uppercase">Design - 2023</span>
                        </div>
                        <div class="text-right">
                            <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="btn py-10 px-20 sm:h-60 rounded-6xl bg-secondary arrow-btn flairBtn group hover-dark group/second" data-block="button">
                                <span class="button-flair-wrapper">
                                    <span class="button-flair"></span>
                                </span>
                                <span class="relative md:w-82 md:h-42 w-62 h-32">
                                    <svg class=" size-full duration-500" viewBox="0 0 82 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path class="hover-fill" d="M78.0488 20.5122L78.0488 22.4634L4.56911e-05 22.4634L4.57764e-05 20.5122L78.0488 20.5122Z" fill="white"></path>
                                        <path class="hover-stroke" d="M59.5122 0.999999C63.8949 12.122 68.2603 16.872 79.0244 21.4598C67.888 25.6573 63.5473 29.5287 59.5122 41" stroke="white" stroke-width="2"></path>
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            @endforelse
        </div>
    </div>
</section>
