{#
Variables:
- prop: a Matrix "Block" entry with fields: heading, richText, icon
#}
{% set propIcon = prop.icon.one() %}

<div class="flex items-start md:flex-col gap-m flex-1">

    {% if propIcon %}
    <div class="min-w-[100px] w-[100px] md:w-full flex-1 max-w-[300px] max-h-[300px] bg-navy">
        <img src="{{ propIcon.url }}" alt="{{ prop.heading }}" class="w-full h-full object-contain">
    </div>
    {% endif %}

    <div class="flex flex-col gap-xs md:gap-m">
        {% if prop.heading %}
        <h3 class="h4 text-white">{{ prop.heading }}</h3>
        {% endif %}

        {% if prop.richText %}
        <div class="text--1 font-rosario text-white">{{ prop.richText }}</div>
        {% endif %}
    </div>
</div>