<template>
    <ul v-if="banners">
        <li v-for="({ link, src }, i) in banners" :key="i">
            <router-link :to="link">
                <img :src="src" />
            </router-link>
        </li>
    </ul>
</template>

<script setup>
const { banners = [] } = inject('data')
</script>

<style lang="scss">
.blog>aside>ul {
    @apply flex-col gap-10 justify-end hidden lg:flex;
    @apply gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-9 2xl:gap-10;

    li {
        img {
            @apply w-full max-w-[26.1rem] bg-zinc-300 rounded-[0.6rem] overflow-hidden;
        }
    }
}
</style>