<template>
  <div class="brands-list df-center-y">
    <img
      v-for="brand in list"
      :key="brand.uuid"
      :src="$_getContentImage(brand.image, 'thumbnail')"
      :alt="brand.title"
    />
  </div>
</template>

<script>
export default {
  name: 'BrandsList',
  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.brands-list {
  flex-wrap: wrap;

  img {
    max-width: 22px;

    + img {
      margin-left: var(--spacing-xs);
    }
  }
}
</style>
