@extends('front.app')
@section('content')

<section class="wrapper bg-gray">
    <div class="container pt-10 pb-14 pb-md-16">
      
        <h1 class="fs-50">{{ trans('module.church_title') }}</h1>
        <hr class="my-8" />
      <!--/.row -->
      <div class="row grid-view gx-md-8 gx-xl-10 gy-8 text-center">
        
      <!--/.row -->
      <div class="row mt-17">
        <div class="col-lg-12">
          <div class="blog grid grid-view">
            <div class="row isotope gx-md-8 gy-8 mb-8">
              @foreach($interests as $interest)
                <article class="item post col-md-4">
                  <div class="card shadow-lg">
                    <figure class="card-img-top overlay overlay-1">
                      <img class="imageHeight" src="{{@$interest->images[0]->original}}" alt="" />
                    </figure>
                    <div class="card-body card-body-fixed-height-1">
                      <div class="post-header">
                        <div class="post category">
                          <show-interest :payload="{{$interest}}"></show-interest>
                        </div>
                        <h2 class="post-title h3 mt-1 mb-3" >{{$interest->translations[0]->title}}</h2>
                      </div>
                      <div class="post-content">
                        <p>{{$interest->translations[0]->description}}</p>
                      </div>
                    </div>
                  </div>
                </article>
              @endforeach
            </div>
            <!-- /.row -->
          </div>
          <!-- /.blog -->
      
          <!-- /nav -->
        </div>
        <!-- /column -->
       
        <!-- /column .sidebar -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  </section>
@endsection