<template>
  <div>
    <p class="mb-16">
      <strong> We accept: </strong>
    </p>
    <ul class="accept-list">
      <li
        v-for="listItem in list"
        :key="listItem.title"
      >
        <span> {{ listItem.title }} </span>
        <p class="text-clr-grey-500">
          {{ listItem.underTitle }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  list: {
    type: Array,
    required: true
  }
})
</script>

<style lang="scss">
.accept-list{
  list-style-type: disc;
  padding: 0 0 0 24px;
  margin: 0;

  display: flex;
  flex-direction: column;
  gap: 16px;

}
</style>