<h2>Experience</h2>
<ul class="list-reset">
{% for item in page.experience %}
<li class="mb-12">
{% if site.companies[item.company].url %}
<h3><a href="{{ site.companies[item.company].url }}" class="text-inherit no-underline hover:underline focus:bg-gray-900">{{ site.companies[item.company].name }}</a></h3>
{% else %}
<h3>{{ site.companies[item.company].name }}</h3>
{% endif %}
{% for role in item.roles %}
<div>
<h4 class="mb-3 text-gray-800">{{ role.title }} from {{ role.from }} to {{ role.to ?: 'present' }} ({{ role.location }})</h4>
{{ role.description|markdown }}
</div>
{% endfor %}
</li>
</ul>