<li class="{{ class }}">

    <a href="{{ option_card.button.url }}" class="innerItem">

        <div class="itemHeader">

            <h4>
                {{ option_card.subtitle }}
            </h4>
            <h2>
                {{ option_card.title }}
            </h2>

        </div> <!-- .itemHeader -->

        <div class="itemImageWrap{% if item_image_hover is not empty %} hasHoverImage{% endif %}{% if (item_image is empty) %} noImage{% endif %}">

            <picture class="innerImage">
                <div class="noImageSvg">
                    {{ file_get_contents(settings.SITE_PATH ~ settings.THEME_URL ~ '/images/icons/picture.svg')|raw }}
                </div> <!-- .noImageSvg -->
            </picture> <!-- .innerImage -->

        </div> <!-- .itemImageWrap -->

        <div class="innerTextBox">

                <div class="productDescription">
                    <p>
                        {{ option_card.description }}
                    </p>
                </div> <!-- .productDescription -->

            <div class="itemFooter">

                <div class="itemLinkWrap">
                    <span class="itemLink">
                        {{ option_card.button.label }}
                    </span>
                </div> <!-- .itemLink -->

            </div> <!-- .itemFooter -->

        </div><!-- .innerTextBox -->

    </a> <!-- .innerItem -->

</li>

