<div class="highlighted-mixed-media block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}} {{ $block->invert ? 'highlighted-mixed-media--invert' : '' }}">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="highlighted-mixed-media__wrapper">
        <div class="highlighted-mixed-media__container">
            @if($block->image1)
                <div class="highlighted-mixed-media__image">
                    <picture>
                        @if($block->image1Mobile)
                            <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1Mobile->filename, '660x520') }}.webp" type="image/webp">
                            <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1Mobile->filename, '660x520') }}">
                        @else
                            <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1->filename, '1145x700') }}.webp" type="image/webp">
                            <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1->filename, '1145x700') }}">
                        @endif
                        <source srcset="{{ getMediaUrl($block->image1->filename, '1145x700') }}.webp" type="image/webp">
                        {!! getMediaImg($block->image1, '1145x700', htmlspecialchars($block->block_title)) !!}
                    </picture>
                </div>
            @endif
            <div class="highlighted-mixed-media__info bg--{{ $block->bg_color }}">
                @if($block->content)
                    <div class="highlighted-mixed-media__content rich-content-system">
                        {!! $block->content !!}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
