{% if variant and variant != 'default' %}
  {% set attributes = attributes.addClass('fr-content-media--' ~ variant) %}
{% endif %}

{% if caption %}
  {% set attributes = attributes.setAttribute('role', 'group').setAttribute('aria-label', caption) %}
{% endif %}

{% set ratio = ratio|default('16x9') %}

<figure{{ attributes.addClass('fr-content-media') }}>
  {% if image %}
    <div class="fr-content-media__img{{ ratio != '16x9' ? ' fr-responsive-vid--' ~ ratio }}">
      {# In the image slot, alt is required, see https://storybook.systeme-de-design.gouv.fr/?path=/docs/content--docs #}
      {{ image|add_class('fr-responsive-img') }}
    </div>
  {% elseif video %}
    <div class="fr-responsive-vid{{ ratio not in ['32x9', '3x2', '3x4', '2x3'] ? ' fr-responsive-vid--' ~ ratio : '' }}">
      {{ video|add_class('fr-responsive-vid__player') }}
    </div>
  {% endif %}

  {% if caption %}
    <figcaption class="fr-content-media__caption">{{ caption }}</figcaption>
  {% endif %}
</figure>
