@isset($data)
    <div class="row justify-content-center my-5 mx-0">
        <div class="col-lg-9">
            <div class="row mb-5">
                <div class="col-md-4">
                    <h1 class="futura-bold display-5">Articles</h1>
                </div>
                <div class="col-md-6">
                    <p class="fs-3">If you want to learn more about our {!! $section !!} here are some quick reads that might be helpful.</p>
                </div>
            </div>
            
            @foreach ($data as $item)
                <div id="Article{{$loop->index}}" class="border-top border-dark {{$loop->index < 5 ? 'active' : 'd-none'}}">
                    <div class="row py-5">
                        <div class="col-md-2">
                            <img class="img-fluid" src="{{asset('uploads/'.$item["imagen"])}}" alt="{!!$item["titulo"]!!}">
                        </div>
                        <div class="col-md-5 d-grid">
                            <p class="fs-5 font-weight-bold">{!!$item["titulo"]!!}</p>
                            <div class="d-md-block d-none align-self-end text-center text-md-left my-3 my-md-0">
                                <a class="btn col-5 rounded-pill fs-6 btn-outline-dark" href="{{route('resources.article',['id' => $item["id_articulo"], 'slug' => Str::slug($item["titulo"]) ]) }}">
                                    Learn more 
                                </a>
                            </div>
                        </div>
                        <div class="col-md-5 d-grid">
                            <span class="fs-6 fw-100 mb-4">{!!$item["descripcion"]!!}</span>
                            <div class="row align-self-end">
                                <div class="col">
                                    <p class="fs-6 fw-800 align-self-end mb-0"><b>{!!$item["autor"]!!}</b></p>
                                    <span class="fs-6 fw-100">{{  \Carbon\Carbon::parse($item["fecha"])->format('m/d/Y')}}</span>
                                    <div class="d-md-none d-block align-self-end text-center text-md-left my-3 my-md-0">
                                        <a class="btn col-5 rounded-pill fs-6 btn-outline-dark" href="{{route('resources.article',['id' => $item["id_articulo"], 'slug' => Str::slug($item["titulo"]) ]) }}">
                                            Learn more 
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

@endisset