<div class="mixed-media block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="mixed-media__wrapper">
        @foreach($block->cards as $i => $card)
            <div class="mixed-media__card">
                <div class="mixed-media__card-image">
                    @if(!empty($card->image))
                        <picture>
                            <source media="(min-width: 768px)" srcset="{{ getMediaUrl($card->image->filename, '1000x1200') }}.webp" type="image/webp">
                            <source media="(min-width: 768px)" srcset="{{ getMediaUrl($card->image->filename, '1000x1200') }}">
                            <source srcset="{{ getMediaUrl($card->image->filename, '500x600') }}.webp" type="image/webp">
                            {!! getMediaImg($card->image, '500x600', htmlentities($card->title)) !!}
                        </picture>
                    @endif
                </div>
                <div class="mixed-media__card-content">
                    <div class="rich-content">
                        <h2>@title($card->title)</h2>
                    </div>
                    <div class="mixed-media__card-subtitle">
                        @title($card->subject)
                    </div>
                    <div class="mixed-media__card-text rich-content">
                        {!! $card->content !!}
                    </div>
                    <div class="mixed-media__cta">
                        {!! generateLink($card->cta, 'std-button std-button--large std-button--orange') !!}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
