{{--
  Title: Tiles-Grid-About
  Description: Grid for about page
  Category: formatting
  Icon: columns
  Keywords: tile posts
  Mode: edit
  Align: left
  PostTypes: page post
  SupportsAlign: full
  SupportsMode: true
  SupportsMultiple: true
  EnqueueStyle:
  EnqueueScript:
  EnqueueAssets:
--}}

@php
$tiles = get_field('tiles');
@endphp

<div class="block-grid-about">
    <div class="block-grid-about__content">
        @foreach ($tiles as $tile)
            <div class="block-grid-about__header">
                <h2 class="block-grid-about__header-title">{!! $tile['title'] !!}</h2>

                @if ($tile['description'])
                <div class="block-grid-about__header-description">
                    <div class="p">{!! $tile['description'] !!}</div>
                </div>
                @endif

                <div class="block-grid-about__separator"/>
            </div>

            <div class="block-grid-about__gallery">
                @foreach ($tile['grid_section'] as $grid)
                    <div class="block-grid-about__item">
                        <div class="block-grid-about__image">
                            <img src="{{ $grid['image']['url'] }}" alt="{{ $grid['image']['alt'] }}" />
                        </div>

                        <div class="block-grid-about__info">
                            <div class="block-grid-about__title">
                                <h3 class="title-3">{!! $grid['title_image'] !!}</h3>
                            </div>

                            @if ($grid['description_image'])
                            <div class="block-grid-about__description">
                                <p class="p">{!! $grid['description_image'] !!}</p>
                            </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

        @endforeach
    </div>
</div>