<div class="portrait-image-cards {{ !empty($styleType) ? "portrait-image-cards--$styleType" : '' }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/home-blocks">
  @if ($block->anchor_id )
    <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
  @endif
  <div>
    <div class="portrait-image-cards__wrap">
      @if($block->block_title)
          <h2>@title($block->block_title)</h2>
      @endif
      <div class="portrait-image-cards__container">
        @foreach($block->cards as $i => $card)
          @php $cardData = $card->getCardFields() @endphp
          @if(!empty($cardData))
            <div class="portrait-image-cards__card" data-action="clickBlock">
                <div class="portrait-image-cards__copy">
                <h3><span>@title($cardData->title)</span></h3>
                {!! !empty($cardData->content) ? $cardData->content : $cardData->excerpt !!}
                {!! generateLink($cardData->cta, 'std-button std-button--small blue-button portrait-image-cards__link') !!}
                </div>
                <div class="portrait-image-cards__image-wrap">
                    @if(!empty($cardData->image))
                    <picture>
                        <source srcset="{{ getMediaUrl($cardData->image->filename, '600x775') }}.webp" type="image/webp">
                        <img src="{{ getMediaUrl($cardData->image->filename, '600x775') }}" alt="{{ htmlentities($cardData->title) }}" loading="lazy"/>
                    </picture>
                    @endif
                </div>
            </div>
          @endif
        @endforeach
      </div>
    </div>
  </div>
</div>
