@php($items = $block->get('items', []))
@php($innerClass = 'ref-block-inner' . ($block->get('reverse') ? ' ref-block--reverse' : ''))
@php($frameClass = 'ref-figure-frame' . ($block->get('dark') ? ' ref-figure-frame--dark' : ''))
@php($listClass = 'ref-list' . ($block->get('cols') ? ' ref-list--cols' : ''))
  <section class="{{ $block->get('section_class') }}">
    <div class="{{ $innerClass }}">
      <figure class="ref-figure" data-reveal>
        <div class="{{ $frameClass }}">
          <img src="{{ media_url($block->get('image')) }}" alt="{{ $block->get('image_alt') }}" loading="lazy" />
        </div>
      </figure>
      <div class="ref-content" data-reveal>
        <p class="ref-cat-eyebrow">{{ $block->get('eyebrow') }}</p>
        <h2 class="ref-cat-title">{!! $block->get('title_html') !!}</h2>
        <ul class="{{ $listClass }}">
@foreach ($items as $item)
          <li class="ref-item"><span class="ref-item-name">{{ $item['name'] ?? '' }}</span>@if (! empty($item['loc']))<span class="ref-item-loc">{{ $item['loc'] }}</span>@endif</li>
@endforeach
        </ul>
      </div>
    </div>
  </section>