@extends('layouts.app')
@section('js')

@endsection
@section('css')
<style>
    .breadcrumbSer {
        width: auto;
        height: 206px;
        background-image: url('/cdn/images/Groupe de masques 23.jpg');
        mask-image: linear-gradient(to right, #000000 -32%, rgba(63, 63, 63, 0.24) 81%, rgba(84, 84, 84, 0) 149%);
        background-size: cover;
    }
</style>
@endsection
@section('content')

<section class="Rectangle-111">
    <div class="breadcrumbSer"></div>
</section>
<section class="events py-5 ">
    <div class="container">
        <div class="text-center my-5">
            <h1>Events</h1>
            <h2>WE ARE HERE TO LISTEN TO YOU</h2>
        </div>
        <div class="row">
            @foreach ($events as $item)
            <div class="col-lg-4 my-3 my-lg-0">
                <x-event user="Admin" id="01" views="{{$item->views}}" title="{{$item->title}}"
                    day="{{ $item->created_at->format('d') }}" month="{{ $item->created_at->format('M') }}"
                    img="{{ asset($item->cover_img) }}" link="{{route('events.show',$item->id)}}"
                    description="{!! strip_tags($item->body) !!}"></x-event>
            </div>
            @endforeach

        </div>

    </div>

</section>
@endsection