{% extends 'careers/base.html' %}{% load i18n wagtailcore_tags %}

<!---->
{% block title %}{{ block.super }} | {{ index.title }}{% endblock %}

<!---->
{% block content %}
<div class="container mx-auto px-4 py-20">
  <section class="grid gap-8">
    {% include 'careers/components/breadcrumbs.html' %}

    <div
      class="mx-auto prose prose-sm prose-video:rounded-box xl:prose-lg 2xl:prose-xl prose-headings:text-primary prose-img:rounded-box prose-img:w-full"
    >
      <h1>{{ index.title }}</h1>

      {{ index.description|richtext }}
    </div>

    <ol class="grid grid-cols-12 gap-4">
      {% for category in index.get_children.specific %}
      <li class="col-span-12 md:col-span-6 lg:col-span-4 2xl:col-span-3">
        {% include 'careers/components/category.html' %}
      </li>
      {% endfor %}
    </ol>
  </section>
</div>
{% endblock %}