<xo-grid class='collection-style-7 {% render 'hover-style' %}' style='--xo-grid-col-gap: 1.5rem'>
  <div style='--xs: 5; --sm: 5; --lg: 4;'>
    <a href='{{ button_link }}' class='collection-style-7__img-box '>
      {% render 'image', image: image, lazyload: true %}
    </a>
  </div>
  <div style='--xs: 7; --sm: 7; --lg: 7;' class='collection-style-7__content'>
    <div>
      {% if title != blank %}
        <h3 class='collection-style-7__title '>
          {{ title }}
        </h3>
        {% if subtitle != blank %}
          <div class='collection-style-7__sub'>{{ subtitle }}</div>
        {% endif %}
        {% if button != blank %}
          <a class='collection-style-7__link ' href='{{ button_link }}'>{{ button }}</a>
        {% endif %}
      {% endif %}
    </div>
  </div>
</xo-grid>
