Image Frame: 16 9 Aspect Ratio Crop

{% if modifier and 'w-' in modifier %} 
    {% set defaultImageWidth = "" %}
{% else %}
    {% set defaultImageWidth = "w-full" %}
{% endif %}

{% if frameModifier and 'w-' in frameModifier %} 
    {% set defaultFrameWidth = "" %}
{% else %}
    {% set defaultFrameWidth = "w-full" %}
{% endif %}

<picture class="block overflow-hidden {{frameModifier}} {{ defaultFrameWidth }}">
    {% set comma = joiner() %}
    {% if xsmMax %}
        <source media="(max-width: 640px)" width="{{xsmMax.width}}" height="{{xsmMax.height}}" srcset="{% for src in xsmMax.srcSet %}{{ comma() }}{{ src.url | asset }} {{ src.size }}w{% endfor %}">
    {% endif %}
    {% if smMax %}
        <source media="(max-width: 767px)" width="{{smMax.width}}" height="{{smMax.height}}" srcset="{% for src in smMax.srcSet %}{{ comma() }}{{ src.url | asset }} {{ src.size }}w{% endfor %}">
    {% endif %}
    {% if mdMax %}
        <source media="(max-width: 1023px)" width="{{mdMax.width}}" height="{{mdMax.height}}" srcset="{% for src in mdMax.srcSet %}{{ comma() }}{{ src.url | asset }} {{ src.size }}w{% endfor %}">
    {% endif %}
    {% if src %}
        <img class="lazyload {{ modifier }} {{ defaultImageWidth }}" alt="" width="{{width}}" height="{{height}}" data-sizes="auto" 
            data-srcset="{% for src in srcSet %}{{ comma() }}{{ src.url | asset }} {{ src.size }}w{% endfor %}"
            data-src="{{ src | asset }}">
    {% endif %}
</picture>