{!-- Determine image settings based on ci_image_size using Stash --}
{if ci_image_size == "Tiny"}
    {exp:stash:set name="ci_img_width_1" scope="user"}400{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_1" scope="user"}300{/exp:stash:set}
    {exp:stash:set name="ci_img_width_2" scope="user"}800{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_2" scope="user"}600{/exp:stash:set}
    {exp:stash:set name="ci_img_container_class" scope="user"}medium-2{/exp:stash:set}
{if:elseif ci_image_size == "Very Small"}
    {exp:stash:set name="ci_img_width_1" scope="user"}500{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_1" scope="user"}350{/exp:stash:set}
    {exp:stash:set name="ci_img_width_2" scope="user"}1000{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_2" scope="user"}700{/exp:stash:set}
    {exp:stash:set name="ci_img_container_class" scope="user"}medium-3{/exp:stash:set}
{if:elseif ci_image_size == "Small"}
    {exp:stash:set name="ci_img_width_1" scope="user"}600{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_1" scope="user"}400{/exp:stash:set}
    {exp:stash:set name="ci_img_width_2" scope="user"}1200{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_2" scope="user"}800{/exp:stash:set}
    {exp:stash:set name="ci_img_container_class" scope="user"}medium-4{/exp:stash:set}
{if:elseif ci_image_size == "Medium"}
    {exp:stash:set name="ci_img_width_1" scope="user"}600{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_1" scope="user"}400{/exp:stash:set}
    {exp:stash:set name="ci_img_width_2" scope="user"}1200{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_2" scope="user"}800{/exp:stash:set}
    {exp:stash:set name="ci_img_container_class" scope="user"}medium-5{/exp:stash:set}
{if:elseif ci_image_size == "Large"}
    {exp:stash:set name="ci_img_width_1" scope="user"}600{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_1" scope="user"}400{/exp:stash:set}
    {exp:stash:set name="ci_img_width_2" scope="user"}1200{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_2" scope="user"}800{/exp:stash:set}
    {exp:stash:set name="ci_img_container_class" scope="user"}medium-7{/exp:stash:set}
{if:else}
    {exp:stash:set name="ci_img_width_1" scope="user"}600{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_1" scope="user"}400{/exp:stash:set}
    {exp:stash:set name="ci_img_width_2" scope="user"}1200{/exp:stash:set}
    {exp:stash:set name="ci_img_max_height_2" scope="user"}800{/exp:stash:set}
    {exp:stash:set name="ci_img_container_class" scope="user"}medium-6{/exp:stash:set}
{/if}

<div class="{ci_container_class} image-container {if ci_image_alignment == 'Left'}pull-left mr80{if:else}pull-right ml20{/if} mb20 pt40-dt {exp:stash:get name="ci_img_container_class" scope="user"} small-12" style="display:inline-block; text-align:center; z-index:10;">
  {if ci_image_hyperlink}
    <a href="{ci_image_hyperlink}" aria-label="{ci_image_description}" title="{ci_image_description}" target="_blank" rel="noopener">
  {/if}
  <picture {ci_image_parameters}>
    <source type="image/webp"
      data-srcset="
        {exp:jcogs_img:pair src='{ci_image}' hide_relative_path='yes' parse='inward' max_height='{exp:stash:get name="ci_img_max_height_1" scope="user"}' width='{exp:stash:get name="ci_img_width_1" scope="user"}' quality='85' crop='yes|center,center|0,0' allow_scale_larger='yes'}https://aws.hawaii-guide.com{exp:pea:webp src='{made}'}{/exp:jcogs_img:pair} {exp:stash:get name="ci_img_width_1" scope="user"}w,
        {exp:jcogs_img:pair src='{ci_image}' hide_relative_path='yes' parse='inward' max_height='{exp:stash:get name="ci_img_max_height_2" scope="user"}' width='{exp:stash:get name="ci_img_width_2" scope="user"}' quality='85' crop='yes|center,center|0,0' allow_scale_larger='yes'}https://aws.hawaii-guide.com{exp:pea:webp src='{made}'}{/exp:jcogs_img:pair} {exp:stash:get name="ci_img_width_2" scope="user"}w"
    />
    <source
      data-srcset="
        {exp:jcogs_img:pair src='{ci_image}' hide_relative_path='yes' parse='inward' max_height='{exp:stash:get name="ci_img_max_height_1" scope="user"}' width='{exp:stash:get name="ci_img_width_1" scope="user"}' quality='85' crop='yes|center,center|0,0' allow_scale_larger='yes'}https://aws.hawaii-guide.com{made}{/exp:jcogs_img:pair} {exp:stash:get name="ci_img_width_1" scope="user"}w,
        {exp:jcogs_img:pair src='{ci_image}' hide_relative_path='yes' parse='inward' max_height='{exp:stash:get name="ci_img_max_height_2" scope="user"}' width='{exp:stash:get name="ci_img_width_2" scope="user"}' quality='85' crop='yes|center,center|0,0' allow_scale_larger='yes'}https://aws.hawaii-guide.com{made}{/exp:jcogs_img:pair} {exp:stash:get name="ci_img_width_2" scope="user"}w"
    />
    <img data-src="{exp:jcogs_img:pair src='{ci_image}' hide_relative_path='yes' parse='inward' max_height='{exp:stash:get name="ci_img_max_height_1" scope="user"}' width='{exp:stash:get name="ci_img_width_1" scope="user"}' quality='85' crop='yes|center,center|0,0' allow_scale_larger='yes'}https://aws.hawaii-guide.com{made}{/exp:jcogs_img:pair}"
         alt="{ci_image_description}"
         class="lazyload {if ci_image_border != 'No'}border555{/if} {ci_image_class}" />
  </picture>
  {if ci_image_hyperlink}
    </a>
  {/if}
  {if ci_image_caption}
    <p class="caption-center">{ci_image_caption}</p>
  {/if}
</div>