@extends('layouts.app')
@section('metades')
    <meta name="description" content="{{ $data['metaDescription'] }}" />
    <meta name="author" content="Kultikri Teacher Training Institute of Higher Studies (KTTIHS)" />
    <meta name="keywords" content="Kultikri Teacher Training Institute of Higher Studies (KTTIHS)" />
@endsection
@section('title')
    <title>{{ $data['metaTitle'] }}</title>
@endsection
@section('content')
<div class="container">
      <div class="w-100 mt-3 text-md-center title-bx1">
            <h3 class="one8">Non Teaching Staff</h3>
      </div>
      <div class="main-gallery">
            <div class="row mb-5">
                  @foreach ($data['moduleItems'] as $item)
                  @if (count($item['dynamicSections']) > 0)
                 @foreach (collect($item['dynamicSections'])->sortBy('id') as $dynamicSection)
                  <div class="col-md-3">
                        <div class="gal-inr">
                              <div class="card">
                                    <img src="{{ $dynamicSection['image'] }}" alt="Avatar">
                                    <div class="card_inner">
                                          <h5>{{ $dynamicSection['title'] }}</h5>
                                          <p>{!! $dynamicSection['description'] !!}</p>
                                    </div>
                              </div>

                        </div>
                  </div>
                  @endforeach
                  @endif
                  @endforeach
            </div>
      </div>
</div>
@endsection
<style>
      .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
      }

      .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      }

      .card_inner {
            padding: 10px;
            min-height: 144px;
      }

      .card_inner h5 {
            font-size: 18px;
            font-weight: 600;
            margin: 0px;
            margin-bottom: 5px;
      }

      .card_inner p {
            line-height: 24px;
      }

      .card_inner p strong {
            font-weight: 500 !important;
            margin-right: 5px;
            display: inline-block;
      }

      @media (max-width: 768px) {
            .card_inner {
                  min-height: auto;
            }
      }
</style>