@extends('front.layouts.app')
@section('title','Mouvements d\'Action Catholique')

@section('content')
    <!--== Start Page Title Area ==-->
    <x-title image="assets/img/banner/etab.jpg" page="Mouvements d'Action Catholique"/>
    <!--== End Page Title Area ==-->


    <!-- Start Popular Causes
     ============================================= -->
    <div class="popular-causes-area default-padding bottom-less">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Les Mouvements d'Action Catholique du Diocèse</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="popular-causes-items">
                    @foreach($motions as $motion)
                        <div class="col-md-4 col-sm-6 equal-height">
                            <a href="{{route('motion.show',$motion->id)}}">
                            <div class="card-motion">
                                <div class="card_image">
                                    <img src="{{asset($motion->getFirstMediaUrl('motion-img'))}}" alt="Thumb">
                                </div>
                                <div class="info2">
                                    <h6 class="text-center media-middle" style="color: white;font-weight: bold">{{$motion->name}}</h6>
                                </div>
                            </div>
                            </a>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    <!-- End Popular Causes -->


@endsection