@extends('frontend::layouts.master')

@section('content')
<div class="bg-top-sub-gradient py-12">
    <h1 class="text-center text-24 lg:text-36 font-bold text-primary leading-10">VDO Content</h1>
    <div class="container">
        <div class="pt-12">
            <div class="flex -mx-3 gap-y-6 flex-wrap">
                @for ($example = 1; $example < 5; $example++)
                    @for ($i = 1; $i < 4; $i++)
                        <div class="w-full xs:w-1/2 md:w-1/3 2xl:w-1/4 px-3">
                            <x-frontend::card.blog-card.template
                                image="{{ Module::asset('frontend:img/video' . $i . '.jpg') }}"
                                title="Video Title Have a Long TextAnd More Review"
                                videoSrc="https://videos.pexels.com/video-files/4167404/4167404-uhd_1440_1920_24fps.mp4"
                                :videoContent=true
                                >
                            </x-frontend>
                        </div>
                    @endfor
                @endfor
                <div class="w-full pt-8 pb-4 text-center">
                    <x-frontend::navigation.pagination.template></x-frontend::navigation.pagination.template>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection