{% set additionalClasses = additionalClasses ?? '' %}

<div class="@container challenge-card challenge-card-deck relative flex flex-col w-full aspect-4/5 bg-indigo text-white overflow-hidden rounded-sm dropshadow {{additionalClasses}}"
    style="--card-rotate: {{ cardRotate ?? 0 }}deg; --card-translate: {{ cardTranslate ?? 0 }}px; --card-delay: {{ cardDelay ?? 0 }}s;">
    <a href="{{challenge.url}}"
        class="absolute top-s right-s flex items-center justify-center w-[48px] h-[48px] bg-white rounded-full hover:scale-110 transition-all duration-300">
        <img src="/assets/icons/arrow-right.svg" alt="{{challenge.title}}" class="w-[36px] h-[36px] object-cover ">
    </a>
    <div class="h-[60%] w-full">
        <img src="{{challenge.image.one().url}}" alt="{{challenge.title}}" class="w-full h-full object-cover">
    </div>
    <div class="relative flex gap-m text-[5cqw] leading-[1.65] p-[8cqw] flex-1 min-h-[30%] w-full ">
        <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-between p-[8cqw]">
            {% for i in 1..5 %}
            <div class="w-full h-[1px] bg-[rgba(255,255,255,0.5)]"></div>
            {% endfor %}
        </div>
        {{challenge.title}}
    </div>
</div>