{% 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">
        <div class="max-w-[240px]">
            <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>
    </div>
    {% endfor %}
</div>
{% endblock content %}