Hero: Video 100

<div class="kx-hero{% if size %} kx-hero--{{ size }}{% endif %} kx-objectfit{% for class in classes %} {{ class }}{% endfor %}">
    {% if video.url -%}
        <div class="kx-hero__poster">
            <video autoplay loop class="kx-hero__img kx-objectfit__img" muted>
                <source src="{{ video.url | path }}" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            </video>
        </div>
    {% elseif img.url -%}
        <picture class="kx-hero__poster">
            {% for size in img.rwd -%}
                <source srcset="{{ size.srcset | path  }}" media="{{ size.size }}">
            {% endfor -%}
            <img class="kx-hero__img kx-objectfit__img" src="{{ img.fallback.url | path  }}" data-fallback="{{ img.fallback.url | path  }}" alt="{{ img.alt }}">
        </picture>
    {% endif -%}
    {%- if content.title -%}
        <div class="kx-hero__content">
            <div class="kx-hero__content__item">
                <div class="kx-container kx-container--tab-m kx-mx--auto{% if content.align %} kx-txt-{{ content.align }}{% endif %}">
                    <h1 class="kx-hero__title">
                        {{ content.title }}
                    </h1>
                    {% if content.lead %}
                    <p class="kx-hero__lead">{{ content.lead }}</p>
                    {% endif %}
                    {% if content.cta.text %}
                    {% render '@button', content.cta, true %}
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif -%}
</div>