<div class="cast-gallery-container">
  {% for image in images %}
    <picture>
      <source
        srcset="{{ image.thumbnail.srcset.avif }}"
        type="image/avif"
        sizes="{{ image.thumbnail.sizes }}"
        data-modal-src="{{ image.modal.src.avif }}"
        data-modal-srcset="{{ image.modal.srcset.avif }}"
        data-modal-sizes="{{ image.modal.sizes }}"
      >
      <img
        id="gallery-image-{{ image.pk }}"
        class="cast-gallery-thumbnail"
        alt="{{ image.default_alt_text }}"
        src="{{ image.thumbnail.src.jpeg }}"
        data-fullsrc="{{ image.file.url }}"
        data-srcset="{{ image.modal.srcset.jpeg }}"
        srcset="{{ image.thumbnail.srcset.jpeg }}"
        sizes="{{ image.thumbnail.sizes }}"
        width="{{ image.thumbnail.width }}"
        height="{{ image.thumbnail.height }}"
        data-modal-src="{{ image.modal.src.jpeg }}"
        data-modal-srcset="{{ image.modal.srcset.jpeg }}"
        data-modal-sizes="{{ image.modal.sizes }}"
        data-modal-width="{{ image.modal.width }}"
        data-modal-height="{{ image.modal.height }}"
        data-prev="{{ image.prev }}"
        data-next="{{ image.next }}"
      />
    </picture>
  {% endfor %}
</div>
