<div class="flex flex-col w-full gap-4 px-10 py-5 bg-gray-100 rounded-md h-fit">
<h3 class="flex">제목</h3>
<div class="grid grid-cols-3 grid-rows-2 gap-3">
<div class="relative flex flex-col w-full col-span-2 row-span-2 rounded cursor-pointer aspect-video">
<div
#cover1
class="absolute z-50 flex items-center justify-center w-full h-full transition-colors rounded bg-black/30 hover:bg-black/50"
(click)="video1.paused ? video1.play() : video1.pause()"
>
<img class="select-none" src="/assets/images/play-button.png" alt="play-video" />
</div>
<video #video1 (play)="cover1.style.opacity = '0'" (pause)="cover1.style.opacity='100'">
<source
src="주소"
/>
</video>
</div>
<div class="grid col-span-1 row-span-2 gap-3">
<div class="relative flex flex-col w-full row-span-1 rounded cursor-pointer aspect-video">
<div
#cover2
class="absolute z-50 flex items-center justify-center w-full h-full transition-colors rounded bg-black/30 hover:bg-black/50"
(click)="video2.paused ? video2.play() : video2.pause()"
>
<img class="select-none" src="/assets/images/play-button.png" alt="play-video" />
</div>
<video #video2 (play)="cover2.style.opacity = '0'" (pause)="cover2.style.opacity='100'">
<source
src="주소"
/>
</video>
</div>
<div class="relative flex flex-col w-full row-span-1 rounded cursor-pointer aspect-video">
<div
#cover3
class="absolute z-50 flex items-center justify-center w-full h-full transition-colors rounded bg-black/30 hover:bg-black/50"
(click)="video3.paused ? video3.play() : video3.pause()"
>
<img class="select-none" src="/assets/images/play-button.png" alt="play-video" />
</div>
<video #video3 (play)="cover3.style.opacity = '0'" (pause)="cover3.style.opacity='100'">
<source
src="주소"
/>
</video>
</div>
</div>
</div>
</div>
