@section('near-by-news')
    
    <section id="lokaal-betrokken">
        <div class="background-image d-flex align-items-center"
             style=" width: 100%;height: auto; background-image: url('images/hart-van-groenlo.jpg'); background-repeat: no-repeat; background-size: cover">
            <div class="container-fluid  d-flex flex-row justify-content-center" style="margin-bottom: 50px">
                <div class="d-flex col-md-6 justify-content-center align-items-center">
                    <h1 style="color: #ffffff; font-size: 45px">
                        <b>H<i class="fas fa-heart text-success"></i>rt van<br>
                        <span style="font-size: 60px">GROLLE</span></b>
                    </h1>
                </div>
                <div class="col-md-5 card" style="margin-top: 50px; padding: 25px  5px">
                    @foreach($array as $near)
                        <div class=" d-flex flex-row">
                            <div class="col-md-4" style="background-image: url('{{$near['image']}}'); background-repeat: no-repeat; background-size: cover">
                            </div>
                            <div class="col-md-8" style="padding-right: 30px">
                                <p style="width: 30%; margin: 15px 0px 0px -30px; line-height: 0; color: #FFFFFFFF">
                                    <span style="background:{{$near['type']['color']}};padding: 0px 10px;">
                                        {{$near['type']['name']}}
                                    </span>
                                </p>
                                <h2 style="margin-top: 50px"><b>{{$near['name']}}</b></h2>
                                <p style="max-width: 100%; word-wrap:break-word;">{{ Str::limit($near['content'], 120)}}</p>
                                <div>
                                    <a style="color: #ffffff; float: right; background-color: {{$near['type']['color']}}; padding: 10px;">Bekijken<i class="fas fa-external-link-alt"></i></a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="col-md-1"></div>


            </div>
        </div>
    </section>
@endsection