    <section class="mx-auto max-w-6xl px-4 py-14 sm:px-6 lg:px-8" aria-label="{{ headline|default('Beliebte Angebote') }}">
        <div class="mb-7 flex flex-wrap items-end justify-between gap-5">
            <div>
                <span class="inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-primary-600">
                    <span class="inline-block h-px w-5 bg-primary-500"></span> {{ 'highlightedOffers.kicker'|trans({}, 'cms') }}
                </span>
                <h2 class="font-display mt-2.5 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">{{ headline|default('Beliebte Angebote') }}</h2>
                {% if text %}<p class="mt-2 max-w-2xl text-[15px] leading-relaxed text-gray-600">{{ text|raw }}</p>{% endif %}
            </div>
            <a class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-600 hover:text-primary-700" href="{{ path('cms', { to: 'offer_list' }) }}">
                {{ 'highlightedOffers.all'|trans({}, 'cms') }}
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
            </a>
        </div>

        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {% for item in items %}
                {% set isFree = (item.fee|default(0)) == 0 %}
                {% set d = item.dates|first %}
                <a class="group flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white transition hover:-translate-y-0.5 hover:border-gray-300 hover:shadow-lg hover:shadow-gray-900/5"
                   href="{{ path('cms', { to: 'offer_list', edition: item.edition is defined ? item.edition : null, auto_item: offer_auto_item(item) }) }}">
                    <div class="flex aspect-[16/10] items-center justify-center bg-gradient-to-br from-primary-50 to-[#f6f0e7] px-4 text-center text-sm font-semibold text-primary-700/80">{{ item.name }}</div>
                    <div class="flex flex-1 flex-col gap-2.5 p-4">
                        {% if isFree %}
                            <div><span class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-green-700 ring-1 ring-inset ring-green-600/20">{{ 'offerDetails.free'|trans({}, 'cms') }}</span></div>
                        {% endif %}
                        <h3 class="text-base font-semibold leading-snug tracking-tight text-gray-900">{{ item.name }}</h3>
                        {% if d and d.begin %}
                            <span class="flex items-center gap-1.5 text-[13px] text-gray-500">
                                <svg class="flex-none text-gray-400" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></svg>
                                {{ d.begin|date('d.m.') }}{% if d.end and d.end|date('Ymd') != d.begin|date('Ymd') %} – {{ d.end|date('d.m.Y') }}{% else %} {{ d.begin|date('Y') }}{% endif %}
                            </span>
                        {% endif %}
                        <div class="mt-auto flex items-center justify-between pt-2 text-sm font-semibold">
                            <span class="text-[13px] font-medium text-gray-500">{% if item.minAge and item.maxAge %}{{ item.minAge }} – {{ item.maxAge }} Jahre{% endif %}</span>
                            <span class="{{ isFree ? 'text-green-700' : 'text-gray-900' }}">{{ isFree ? 'offerDetails.free'|trans({}, 'cms') : (item.fee / 100)|number_format(2, ',', '.') ~ ' €' }}</span>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>
    </section>
