<template>
  <section id="usp">
    <v-container fluid class="px-4 mx-4">
      <div class="row">
        <div class="col-12 col-md-4 item">
          <div class="d-flex">
            <v-icon size="60" color="#5885C0">mdi-script-outline</v-icon>

            <div class="d-flex flex-column pa-4 mx-4">
              <span class="title">Behangrol advies</span>
              <span>Hulp nodig bij het uitrekenen van het aantal rollen behang?</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-4 item">
          <div class="d-flex">
            <v-icon size="60" color="#5885C0">mdi-script-outline</v-icon>

            <div class="d-flex flex-column pa-4 mx-4">
              <span class="title">Interieuradvies</span>
              <span>Hulp nodig bij het uitrekenen van het aantal rollen behang?</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-4 item">
          <div class="d-flex">
            <v-icon size="60" color="#5885C0">mdi-script-outline</v-icon>

            <div class="d-flex flex-column pa-4 mx-4">
              <span class="title">Bezoek ons</span>
              <span>Wij ontvangen je graag op afspraak voor een persoonlijk gesprek!</span>
            </div>
          </div>
        </div>
      </div>
    </v-container>
  </section>
</template>

<script>
export default {
  data: () => ({
    items: [
      {icon: 'mdi-script-outline', title: '', text: ''},
      {icon: '', title: '', text: ''},
      {icon: '', title: '', text: ''},
    ]
  })
}
</script>

<style lang="scss" scoped>
#usp {
  margin: 80px 0;
  .item {
    #icon {
      font-size: 60px;
      color: yellow;
      width: 90px;
      float: left;
    }
    .title {
      font-weight: 700;
      display: block;
    }
  }
}
</style>