{% set aspectRatio = aspectRatio|default("landscape") %}
{% set resizeConfig = resizeConfig|default({
    xs: [640, 426],
    sm: [1024, 683],
    lg: [1280, 853],
    xl: [1600, 1067],
    xxl: [1920, 1280],
    xxxl: [2560, 1707],
}) %}
{% set isBgRepeat = isFitContain or isFitCover ? false : true %}
{% set classesBg = (isBgRepeat ? 'is-bg-repeat ' : '') ~ 'media-image-background' %}
{% if isBgRepeat %}
    <span
        class="media media-image media-image-background {{ classes }} {{ classesBg }}"
        style="background-image: url('{{ src }}'); background-repeat: repeat;"
        data-component
        data-hvr="media/image-background"
        data-src="{{ src }}"
        {% if srcMobile %}data-src-mobile="{{ srcMobile }}"{% endif %}
        {% if srcTablet %}data-src-tablet="{{ srcTablet }}"{% endif %}
        {% if srcXL %}data-src-xl="{{ srcXL }}"{% endif %}
        {{ params }}
    >
    </span>
{% else %}
    {% if wordpressId %}
        {% include '@views/components/media/image/template.twig' with {
            classes: classes ~ ' ' ~ classesBg,
            params: params,
            aspectRatio: aspectRatio,
            wordpressId: wordpressId,
            resizeConfig: resizeConfig,
            isFitContain: isFitContain,
            isFitCover: isFitCover,
            isButtonChild: isButtonChild,
        } only %}
    {% else %}
        {% include '@views/components/media/image/template.twig' with {
            classes: classes ~ ' ' ~ classesBg,
            params: params,
            alt: alt,
            src: src,
            srcMobile: srcMobile,
            srcTablet: srcTablet,
            srcXL: srcXL,
            isFitContain: isFitContain,
            isFitCover: isFitCover,
            isButtonChild: isButtonChild,
        } only %}
    {% endif %}
{% endif %}