---
image:
  type: 'hash'
class:
  type: 'string'
  default: 'img-fluid'
grid_breakpoints:
  type: 'array'
  default:
  - 576
  - 768
  - 992
  - 1200
  - 1400
---
<img
  alt="{{ image.description | escape_once }}"
  src="{{ image.path | thumbnail: grid_breakpoints.last | component_escape }}"
  class="{{ class }}"
  loading="lazy"
  srcset="
    {%- for grid_breakpoint in grid_breakpoints -%}
      {{- image.path | thumbnail: grid_breakpoint | component_escape }} {{ grid_breakpoint }}w{{ forloop.last | value_unless: ',' -}}
    {%- endfor -%}
  "
>