{% block styles %}
    <style>
        .resize {
            border: 1px solid transparent;
            border-radius: 4px;
            max-height: 300px;
            width: 400px;
            padding: 8px;
        }

        .resize:hover {
            border-color: #525252;
        }
    </style>
{% endblock %}
<div>
    {% for image in field.value %}
        <a href="#" class="ea-lightbox-thumbnail" data-ea-lightbox-content-selector="#ea-lightbox-{{ image.id }}">
            <img src="/assets/images/products/{{ image.images }}" class="img-fluid resize">
        </a>
        <div id="ea-lightbox-{{ image.id }}" class="ea-lightbox">
            <img src="/assets/images/products/{{ image.images }}">
        </div>
    {% endfor %}
</div>