<section class="flex border border-slate-200 rounded bg-white p-3">
	<aside class="flex justify-center items-center pr-3 shrink-0">
  {% match skill.thumbnail %}
  {% when Some with (source) %}
  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 64, 64, &format!("{} cover", skill.name), Some("h-12 w-12 md:h-16 md:w-16")).unwrap_or("cover not found".to_string()) %}
  <figure class="mx-4 my-2">
     {{picture|safe}}
  </figure>
  {% when None %}
  {% endmatch %}
	</aside>
	<section>
		<header>
			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{skill.name}}</h3>
		</header>
		<section class="text-sm leading-tight text-slate-800 md:text-lg md:leading-tight">{{skill.description|parse_markdown|safe}}</section>
	</section>
</section>
