@props(['product'])
<div>
    <div class="py-6">
        <div id="comment" class="-translate-y-60"></div>
        <div class="relative mb-16 w-fit text-2xl font-medium">
            {{ __('comments') }}
            <span class="absolute right-0 top-10 h-[3px] w-full rounded-full bg-primary"></span>
        </div>
        <div class="grid grid-cols-12 gap-y-8 md:gap-8">
            <!-- Submit new Comment -->
            <div class="col-span-12 md:col-span-5 lg:col-span-4">
                <livewire:blesser.comment.comment-form  :product="$product"/>
            </div>
            <div class="order-first col-span-12 mb-10 overflow-hidden md:order-last md:col-span-7 lg:col-span-8">
                <livewire:blesser.comment.comment-list :product="$product"/>
            </div>
        </div>
    </div>
</div>