<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">


<figure class="relative not-prose">
    <f:if condition="{fileDesktop || fileMobile}">
        <f:then>
            {f:or(content: fileMobile, alternative: fileDesktop) -> f:variable(name: 'fileMobile')}
            <picture>
                <source media="(max-width: 767px)"
                        srcset="{f:uri.image(image: fileMobile, fileExtension: 'webp', width: '{settings.media.sizes.mobile.width / 3}')} {settings.media.sizes.mobile.width / 3}w,
                        {f:uri.image(image: fileMobile, fileExtension: 'webp', width: '{settings.media.sizes.mobile.width / 1.5}')} {settings.media.sizes.mobile.width / 1.5}w,
                        {f:uri.image(image: fileMobile, fileExtension: 'webp', width: '{settings.media.sizes.mobile.width}')} {settings.media.sizes.mobile.width}w,
                        {f:uri.image(image: fileMobile, fileExtension: 'webp', width: '{settings.media.sizes.mobile.width / 0.75}')} {settings.media.sizes.mobile.width / 0.75}w"/>
                <source
                        srcset="{f:uri.image(image: fileDesktop, fileExtension: 'webp', width: '{settings.media.sizes.desktop.width}')} {settings.media.sizes.desktop.width}w,
                        {f:uri.image(image: fileDesktop, fileExtension: 'webp', width: '{settings.media.sizes.desktop.width / 0.75}')} {settings.media.sizes.desktop.width / 0.75}w,
                        {f:uri.image(image: fileDesktop, fileExtension: 'webp', width: '{settings.media.sizes.desktop.width / 0.5}')} {settings.media.sizes.desktop.width / 0.5}w,
                        {f:uri.image(image: fileDesktop, fileExtension: 'webp', width: '{settings.media.sizes.desktop.width / 0.375}')} {settings.media.sizes.desktop.width / 0.375}w"/>
                <f:image image="{fileMobile}" width="{settings.media.sizes.mobile.width / 2}" loading="{f:or(content: loading, alternative: settings.media.loading)}" alt="{fileMobile.alt}" class="object-cover w-full h-full bg-gray-200 {f:if(condition: croppedHeight, then:' max-h-[160vw] lg:max-h-[90svh] object-cover')}"/>
            </picture>
        </f:then>
        <f:else>
            <img src="https://placehold.co/1920x900/{bgColor -> v:format.replace(substring: '#', replacement: '')}/fff?text=Image+missing!" width="1920" height="900" alt="">
        </f:else>
    </f:if>
    <f:if condition="{caption}">
        <f:render partial="Media/Rendering/Caption" arguments="{data:data}"/>
    </f:if>
</figure>
