<template>
    <section class="latest-posts">
        <div>
            <h2>{{ $t('mediaAndContent') }}</h2>
            <h3>
                <span>{{ $t('toViewLatestMediaAndContent') }}</span>
                <router-link to="/blog">{{ $t('clickHere') }}</router-link>
            </h3>
            <div>
                <ul>
                    <li v-for="(post, i) in lastBlog" :key="i">
                        <BlogCard :data="post" />
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>

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

<style lang="scss">
.latest-posts {
    @apply w-full flex justify-center mt-[5.3rem] lg:mt-[8.8rem];

    &>div {
        @apply container flex flex-col w-full;

        &>h2 {
            @apply text-[#0B1F11] font-bold font-vazir mr-6 lg:mr-4;
            @apply text-lg lg:text-3xl;
        }

        &>h3 {
            @apply flex items-center gap-1.5 mt-1.5 mr-6 font-vazir;
            @apply text-sm lg:text-xl lg:mt-2 lg:mr-4;

            span {
                @apply text-[#8C8C8C] leading-9;
            }

            a {
                @apply text-primary-600 font-bold leading-[2.8rem];
            }
        }

        &>div {
            @apply w-full flex lg:overflow-x-auto;

            &::-webkit-scrollbar {
                @apply hidden;
            }

            &>ul {
                @apply flex flex-wrap lg:flex-nowrap justify-center gap-5 mx-2 lg:w-max h-max mt-4 lg:my-12 self-center;
            }
        }
    }
}
</style>
