{{ partial:components/section :bg-color="background.color" :bg-image="background.image ? background.image[0] : null" :max-width="options.max_content_width" :extra-padding="options.extra_section_padding" :class="options.custom_class_name" }}
    {{ if carousel_title }} {{ partial:components/section-title :bg-color="background.color" :text="carousel_title" }} {{ /if }}

    {{ if carousel_text }} {{ partial:components/text-wrapper :bg-color="background.color" :text="carousel_text" }} {{ /if }}

    <div class="absolute left-0 w-full mt-4">
        <div
            class="h-80"
            x-data="{
                active: 0,
                flkty: null,
                init() {
                    this.flkty = new Flickity(this.$refs.carousel, { wrapAround: true });
                    this.flkty.on('change', i => this.active = i);
                },
                handleResize() {
                    this.flkty.resize();
                }
            }"`
            x-ref="carousel"
            @resize.window="handleResize()"
        >
            {{ slides }}
                <div class="w-full h-full flex flex-col items-center justify-center">
                    {{ slide_image }}
                        <img src="{{ url }}" alt="{{ alt ?? slide_title }}" class="h-48 mx-auto mb-5" />
                    {{ /slide_image }}

                    {{ if slide_title }}
                        <h2
                            class="
                                uppercase font-bold font-headline text-2xl
                                {{ if background.color }} text-{{ convert_color:bg_to_headline :color="background.color" }} {{ else }} text-black {{ /if }}
                            "
                        >
                            {{ slide_title }}
                        </h2>
                    {{ /if }}
                </div>
            {{ /slides }}
        </div>
    </div>
    <div class="h-80 mt-4"></div>
{{ /partial:components/section }}