<template>
    <section class="reviews">
        <Swiper slides-per-view="auto">
            <SwiperSlide v-for="(review, i) in reviews" :key="i">
                <router-link :to="'blog/' + review.link">
                    <img :src="review.coverPath" />
                    <h2>{{ review.title }}</h2>
                    <i class="isax isax-arrow-circle-left5" />
                </router-link>
            </SwiperSlide>
        </Swiper>
    </section>
</template>

<script setup>
const { reviews } = inject('data')
</script>

<style lang="scss">
.reviews {
    @apply w-full flex justify-center my-9 lg:my-[4.4rem];

    .swiper {
        @apply container py-2 lg:py-4 rtl max-lg:px-4;

        .swiper-wrapper {
            @apply w-max;

            .swiper-slide {
                @apply w-min ml-2.5 lg:ml-6 last:ml-0;

                a {
                    @apply flex items-end justify-between relative rounded-lg overflow-hidden text-white z-0;
                    @apply w-[9.9rem] h-[7.6rem] gap-4 px-[0.3rem] pb-2.5;
                    @apply lg:w-[18.3rem] lg:h-56 lg:gap-[1.3rem] lg:p-6;

                    img {
                        @apply absolute inset-0 z-0;
                    }

                    &::after {
                        background: linear-gradient(180deg, #0000 43.02%, #00000096 100%);
                        @apply content-['_'] absolute inset-0 z-[1];
                    }

                    h2 {
                        @apply text-xs lg:text-[1.3em] lg:leading-8 font-black font-iran-sans z-[2] whitespace-break-spaces;
                    }

                    i {
                        @apply text-lg lg:text-2xl z-[2] -mb-2 lg:-mb-1;
                    }
                }
            }
        }
    }
}
</style>
