<div x-data=“{ open: false }”>

<a @click="open = true" title="View large image">
    <figure class="image {{ include.ratio | default: is-16by9 }}">
        <img src="{{ include.link | absolute_url }}" alt="{{ include.alt }}">
    </figure>
</a>
<div class="modal" :class="{ 'is-active': open }">
    <div class="modal-background" @click="open = false"></div>
    <div class="modal-content">
        {% if include.large_link %}
            <img src="{{ include.large_link | absolute_url }}" alt="{{ include.alt }}">
        {% else %}
            <img src="{{ include.link | absolute_url }}" alt="{{ include.alt }}">
        {% endif %}
    </div>
    <button class="modal-close is-large" aria-label="close" @click="{ open = false }"></button>
</div>

</div>