<template>
    <div class="compare-spec-item">
        <h3>{{ title }}</h3>
        <ul>
            <li v-for="item in items" :key="item">
                <span>{{ item }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
const props = defineProps(['data'])
const { title , items } = props.data
</script>

<style lang="scss">
.compare-spec-item {
    @apply flex flex-col gap-[1.1rem];

    h3 {
        @apply text-[#999999] text-xs lg:text-base font-normal font-vazir text-center lg:text-right;
    }

    ul {
        @apply flex;

        li {
            @apply w-full lg:w-[28.1rem] text-center;

            span {
                @apply text-[#333333] text-xs font-normal font-vazir lg:text-base lg:font-medium;
            }

            &:last-child{
                // @apply max-lg:text-left;
            }
        }
    }

}
</style>