{% load wagtailcore_tags wagtailimages_tags %}

<div class="card mb-3 {{self.settings.custom_css_class}}"
{% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>
    <div class="row g-0">
        {% if self.image %}
        {% image self.image fill-300x900 as card_img %}
        <div class="col-4 col-xl-2" style="background-image:url('{{card_img.url}}'); background-position:center; background-size:cover;">
            {% comment %} <img class="card-img-top w-100" src="{{card_img.url}}" alt="{{card_img.title}}"> {% endcomment %}
        </div>
        {% endif %}
        <div class="col-8 col-xl-10">
            <div class="card-body">
                {% if self.title %}<h5 class="card-title">{{self.title}}</h5>{% endif %}
                {% if self.subtitle %}<h6 class="card-subtitle mb-2 text-muted">{{self.subtitle}}</h6>{% endif %}
                <div class="card-text">{{self.description}}</div>
                {% for button in self.links %}
                {% include_block button %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>
