<template>
    <section class="home-banners">
        <div>
            <router-link v-for="({link, image}, i) in banners" :key="i" :to="link">
                <img :src="image" />
            </router-link>
        </div>
    </section>
</template>

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

<style lang="scss">
.home-banners {
    @apply w-full flex justify-center mt-6 lg:mt-[6.5rem];

    div {
        @apply flex flex-wrap justify-center gap-3 lg:gap-[1.4rem] ;

        a {
            img {
                @apply object-contain w-[21.3rem] h-[6.6rem] lg:w-[47.9rem] lg:h-[18.8rem];
            }
        }
    }
}
</style>
