@include('layouts.header')


<div class="container my-4">
    <div class="d-flex flex-column align-items-center">
        <h3 class="content-card-title">Audio Visuals</h3>
    </div>
    <div class="row g-4 mt-2">
        @foreach($audio_visuals as $audio_visual)
        <div class="col-6 col-md-4">
            <div class="card">
                <iframe  src="{{$audio_visual->link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-body">
                    <h5 class="card-title">{{$audio_visual->title}}</h5>
                    <p class="card-text">{{$audio_visual->description}}</p>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>


@include('layouts.footer')