<template>
    <div
        class="flex flex-wrap gap-[20px] max-w-[1150px] m-auto items-start justify-center pb-[113px]"
    >
        <div
            v-for="(item, idx) in our_values"
            :key="idx"
            class="shadowing rounded-[38px] pt-10 pb-5 px-5 w-[270px]"
        >
            <img
                class="w-[80px] h-[80px] rounded-[3px] mb-[10px] object-cover no-magnify"
                :src="item.photo_url"
                :alt="item[`name_${$i18n.locale}`]"
            />
            <span
                class="text-[18px] font-medium font-Inter leading-[21.78px]"
                :class="{
                    'text-green-300': item.id % 1 == 0,
                    'text-[#7F1BFF]': item.id % 2 == 0,
                    'text-[#FF3D3D]': item.id % 3 == 0,
                    '!text-[#29419B]': item.id % 4 == 0,
                    '!text-[#FA8C16]': item.id % 5 == 0,
                    '!text-[#E127FF]': item.id % 6 == 0,
                    '!text-[#28B2FF]': item.id % 7 == 0,
                }"
                >{{ item[`name_${$i18n.locale}`] }}</span
            >

            <h5
                class="text-[18px] font-medium font-Inter leading-[21.78px] line-clamp-2 min-h-[44px]"
            >
                {{ item[`description_${$i18n.locale}`] }}
            </h5>
        </div>
    </div>
</template>
<script>
export default {
    props: ["our_values"],
};
</script>
