{{ collection:collaborations sort="title:asc" }}
    <div id="collaborations-modal-{{ index }}" class="portfolio-modal collaborations fixed inset-0 overflow-y-auto">
        <div class="h-full max-w-8xl mx-auto px-[20px] py-[30px] lg:py-[60px]">
            <div class="navigation flex justify-between items-center mb-[30px] lg:mb-[50px] relative">
                <a href="/"><img src="/assets/logos/logo-nadine-cloos.svg" alt="Logo" class="logo-header" loading="lazy" /></a>
                <button class="text-25-35 text-black" onclick="closeModal('collaborations-modal-' + '{{ index }}')">✕</button>
            </div>
            <div class="w-full relative content-slide relative">
                <div class="wrapper-slide h-full grid grid-cols-12">
                    <div class="col-span-12 lg:col-span-5">
                        <div class="glide-slider collab-slider h-full relative" data-id="collab-item" data-nbslidexxxl="1" data-nbslidexxl="1" data-nbslidexl="1" data-nbslidelg="1" data-nbslidemd="1" data-nbslidesm="1" data-nbslide="1" data-autoplay="0" data-gap="50" data-id="blogItem" data-typeslider="slider">
                            <div class="glide__track h-full" data-glide-el="track">
                                <ul class="glide__slides h-full relative">
                                    {{ images }}
                                        <li class="glide__slide h-full">
                                            {{# <img src="{{ url }}" alt="{{ title }}" class="object-contain lg:object-cover w-full h-full" loading="lazy" /> #}}
                                            {{ partial:components/picture :image="images[index]" cover="false" class="object-contain lg:object-cover w-full h-full" lazy="true" }}
                                        </li>
                                    {{ /images }}
                                </ul>
                                <!-- Navigation -->
                                <div class="glide__arrows collab" data-glide-el="controls">
                                    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M9.35156 18.0938C9.11719 18.3021 8.89583 18.3021 8.6875 18.0938L0.445312 9.8125C0.210938 9.60417 0.210938 9.39583 0.445312 9.1875L8.6875 0.90625C8.89583 0.697917 9.11719 0.697917 9.35156 0.90625L9.625 1.21875C9.83333 1.42708 9.83333 1.64844 9.625 1.88281L2.63281 8.83594H17.3203C17.6328 8.83594 17.7891 8.99219 17.7891 9.30469V9.69531C17.7891 10.0078 17.6328 10.1641 17.3203 10.1641H2.63281L9.625 17.1172C9.83333 17.3516 9.83333 17.5729 9.625 17.7812L9.35156 18.0938Z" fill="white"/>
                                        </svg>                            
                                    </button>
                                    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                                        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8.6875 0.90625C8.92188 0.697917 9.14323 0.697917 9.35156 0.90625L17.5938 9.1875C17.8281 9.39583 17.8281 9.60417 17.5938 9.8125L9.35156 18.0938C9.14323 18.3021 8.92188 18.3021 8.6875 18.0938L8.41406 17.7812C8.20573 17.5729 8.20573 17.3516 8.41406 17.1172L15.4062 10.1641H0.71875C0.40625 10.1641 0.25 10.0078 0.25 9.69531V9.30469C0.25 8.99219 0.40625 8.83594 0.71875 8.83594H15.4062L8.41406 1.88281C8.20573 1.64844 8.20573 1.42708 8.41406 1.21875L8.6875 0.90625Z" fill="white"/>
                                        </svg>                            
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-span-12 lg:col-span-6 lg:col-start-7">
                        <div class="wrapper-content flex flex-col justify-between h-full">
                            <div>
                                <hr class="line-project mt-[20px] lg:mt-0 mb-[15px] lg:mb-[50px]" />
                                <h1 class="text-30-40 lg:text-60-72 font-semibold italic newsreader">{{ title }}</h1>
                                <div class="text-20-30 oswald font-light mt-[5px]">
                                    {{ description }}
                                </div>
                                <p class="text-20-30 oswald font-light mt-[5px]">{{ price }}€</p>
                            </div>
                            <div class="mt-[60px] lg:mt-5 mb-[60px] lg:mb-0">
                                <a href="/contact?project={{ title }}" class="btn-buy-project flex items-center justify-start flex-col md:flex-row gap-[20px] md:gap-[30px]">
                                    <div class="icon-buy-project">
                                        <svg width="40" height="36" viewBox="0 0 40 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.8906 28.2188C14.9414 28.2188 16.7188 29.9961 16.7188 32.0469C16.7188 34.166 14.9414 35.875 12.8906 35.875C10.7715 35.875 9.0625 34.166 9.0625 32.0469C9.0625 29.9961 10.7715 28.2188 12.8906 28.2188ZM12.8906 33.6875C13.7793 33.6875 14.5312 33.0039 14.5312 32.0469C14.5312 31.1582 13.7793 30.4062 12.8906 30.4062C11.9336 30.4062 11.25 31.1582 11.25 32.0469C11.25 33.0039 11.9336 33.6875 12.8906 33.6875ZM39.209 6.13867C39.6191 6.68555 39.7559 7.36914 39.5508 7.98438L35.9961 20.4941C35.5859 21.8613 34.2871 22.75 32.8516 22.75H11.5918L12.0703 24.9375H34.2188C34.7656 24.9375 35.3125 25.4844 35.3125 26.0312C35.3125 26.6465 34.7656 27.125 34.2188 27.125H11.25C10.7031 27.125 10.293 26.7832 10.1562 26.3047L4.89258 3.0625H1.40625C0.791016 3.0625 0.3125 2.58398 0.3125 1.96875C0.3125 1.42188 0.791016 0.875 1.40625 0.875H5.78125C6.25977 0.875 6.66992 1.28516 6.80664 1.76367L7.62695 5.25H37.5C38.1836 5.25 38.7988 5.5918 39.209 6.13867ZM33.877 19.8789L37.5 7.36914L8.10547 7.4375L11.1133 20.6309C11.1133 20.6309 11.1816 20.5625 11.25 20.5625H32.8516C33.3301 20.5625 33.8086 20.2891 33.877 19.8789ZM31.4844 28.2188C33.5352 28.2188 35.3125 29.9961 35.3125 32.0469C35.3125 34.166 33.5352 35.875 31.4844 35.875C29.3652 35.875 27.6562 34.166 27.6562 32.0469C27.6562 29.9961 29.3652 28.2188 31.4844 28.2188ZM31.4844 33.6875C32.373 33.6875 33.125 33.0039 33.125 32.0469C33.125 31.1582 32.373 30.4062 31.4844 30.4062C30.5273 30.4062 29.8438 31.1582 29.8438 32.0469C29.8438 33.0039 30.5273 33.6875 31.4844 33.6875Z" fill="white"/>
                                        </svg>
                                    </div>
                                    <p class="text-buy-project text-center md:text-left">
                                        <span class="text-25-35 font-semibold italic newsreader">Intéressé par cette œuvre ?</span><br>
                                        <span class="text-20-30 font-light oswald">Contactez-moi via le formulaire.</span>
                                    </p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{ /collection:collaborations }}