@if (! empty($news['show']) && ! empty($latestPosts))
<section class="section" id="news">
  <div class="container">
    <div class="blog-head reveal">
      <div>
        @if (! empty($news['eyebrow']))
          <div class="section-eyebrow">{{ $news['eyebrow'] }}</div>
        @endif
        @if (! empty($news['title']))
          <h2 class="section-title">{{ $news['title'] }}</h2>
        @endif
      </div>
      @if (! empty($news['intro']))
        <p>{{ $news['intro'] }}</p>
      @endif
    </div>

    <div class="blog-grid">
      @foreach ($latestPosts as $post)
        <a href="{{ $post['permalink'] }}" class="post reveal">
          <div class="post-media">
            @if ($post['image'])
              <img src="{{ $post['image'] }}" alt="{{ $post['title'] }}" loading="lazy" />
            @else
              <div class="ph-icon">
                <x-icon.placeholder />
              </div>
            @endif
          </div>
          <div class="post-meta">
            <span class="post-tag">{{ $post['category'] }}</span>
            <span>{{ $post['date'] }}</span>
          </div>
          <h3 class="post-title">{{ $post['title'] }}</h3>
          <p class="post-excerpt">{{ wp_trim_words(strip_tags($post['excerpt']), 22) }}</p>
        </a>
      @endforeach
    </div>
  </div>
</section>
@endif