{% extends "layouts/base.html" %}

{% block content %}
<div class="flex flex-wrap justify-center gap-2">
    {% for section_path in section.subsections %}
    {% set section = get_section(path=section_path) %}
    <div class="flex flex-col bg-background-50 p-2 rounded-xl hover:bg-background-100 transition-colors">
        <figure>
            <img src="/img/240x135-placeholder.svg"/>
        </figure>
        <a class="font-medium px-1 pt-1 hover:underline" href={{ section.permalink }}>{{ section.title }}</a>
        <p class="px-2">{{ section.description }}</p>
    </div>
    {% endfor %}
</div>
{% endblock content %}