{{-- Shortlink Generator Section --}}
<div class="max-w-screen-xl px-4 py-4 mx-auto mb-4 md:flex md:gap-4 md:justify-between md:items-start lg:px-20">
    {{-- Device Mockup (Dark Theme) --}}
    <div class="anm hidden md:block mb-5 relative mx-auto border-black bg-black border-[14px] rounded-[2.5rem] h-[528px] w-[278px] shadow-lg shadow-black lg:mb-0">
        <div class="h-[32px] w-[3px] bg-black absolute -start-[17px] top-[72px] rounded-s-lg"></div>
        <div class="h-[46px] w-[3px] bg-black absolute -start-[17px] top-[124px] rounded-s-lg"></div>
        <div class="h-[46px] w-[3px] bg-black absolute -start-[17px] top-[178px] rounded-s-lg"></div>
        <div class="h-[64px] w-[3px] bg-black absolute -end-[17px] top-[142px] rounded-e-lg"></div>
        <div class="rounded-[2rem] overflow-hidden w-[250px] h-[500px] bg-white">
            {!! \App\Helpers\ContentHelper::generatePictureElement('img/device-dark.png', 'sub for unlock', 'w-[250px] h-[500px]') !!}
        </div>
    </div>

    {{-- Generator Content --}}
    <div id="generate_now" class="lg:w-2/3">
        {{-- Generator Form Container --}}
        <div>
            <div class="stu_cnt" id="stuCnt"></div>
        </div>

        {{-- Preview Container --}}
        <div>
            <div class="prv_cnt d_stu" id="stuPrv"></div>
        </div>
    </div>
</div>